Detect scroll into dom element

Question

I want to detect scroll change into dom element, for example:

    <div id="box">
      ...
    </div>

Imagine a box 300x200, and I want to know if someone do a scroll inside it, and how much it is. How can I know?

I prefer only use Javascript and not JQuery, because I'm not loading it and I think it's a lot for too little, but I'm open to other opinions

2

Have you tried something? – Takit Isy May 07 '18 at 14:39

score 0 · Answer 1 · answered May 07 '18 at 14:40

0

Copied from below post, and edited for your id: How to capture scroll event?

<div id="box" onscroll="Onscrollfnction();">

<script>
function Onscrollfnction() {
        alert("scroll");
    };
</script>

answered May 07 '18 at 14:40

Marker

560
4
20

He also asked for the amount of the scroll. You may want to have your function pass in the `event` to help determine scroll distance. – Ryan C May 07 '18 at 14:41

Takit Isy · Accepted Answer · 2018-05-07T14:55:25.627

0

Here is a working snippet with the current scrolled value:

document.getElementById('scroll-box').onscroll = function() {
  console.log(this.scrollTop);
};

#scroll-box {
  background-image: url(http://placekitten.com/g/300/200);
  overflow: scroll;
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

#elements {
  overflow: hidden;
  height: 1000px;
}

<div id="scroll-box">
  <div id="elements"></div>
</div>

I hope it helps.

edited May 07 '18 at 14:55

answered May 07 '18 at 14:49

Takit Isy

9,688
3
23
47

But my element don't have scroll... I need to have the scroll variations when you are hover a image, like http://www.s--h.dk/ – May 07 '18 at 14:53
@ooootramas That's not images. That's span, divs, and all… with images inside. Anyway, I've added an image. (So cuuuute.) – Takit Isy May 07 '18 at 14:56
I know, that's the reason I don't put it in the question, it's an example, I want to know if I can do the same... but only with the images – May 07 '18 at 15:00

score 0 · Answer 3 · answered May 07 '18 at 15:00

0

You can use target.addEventListener("scroll", functionName);

answered May 07 '18 at 15:00

Mgasmi

417
3
13

Detect scroll into dom element

3 Answers3