Event Listener doesn't see and cooperate with div#id element

user_6432382 0
Viewed 81

I need to check if user stops scrolling some element on website (stop scrolling using mouse wheel not website) so I write some function in native JS for that:

document.addEventListener("DOMContentLoaded", function(event) { 
    scroller();
});
  function scroller(){        
        var scrolling_area = document.getElementById("scroll-area");
        console.log(scrolling_area); //shows good div
        scrolling_area.addEventListener('scroll', function (event) {
            event.preventDefault();
            clearTimeout(isScrolling);
            isScrolling = setTimeout(function () {
                console.log('User stops scrolling');
            }, 66);
        }, false);
    }
    
<div id="scroll-area" style="background:#ccc; height:1000px"></div>

function scroller(){        
    var scrolling_area = document.getElementById("scroll-area");
    console.log(scrolling_area); //shows good div
    scrolling_area.addEventListener('scroll', function (event) {
        event.preventDefault();
        clearTimeout(isScrolling);
        isScrolling = setTimeout(function () {
            console.log('User stops scrolling');
        }, 66);
    }, false);
}

First console.log() shows good div, also if I use window instead of #scrolling_area element everything works fine.

window.addEventListener('scroll', function (event) {...});

But when I'm trying to use my div element I can't see any results. I also tried use listener with and without preventDefault() function. Am I doing something wrong or the div#scrolling_area may cause some issues?

addeventlistener javascript
3 Answers

This may not be everything you need to solve your issue as I know your code is larger than what you posted.

However, the reason the scroll event is not being fired on the scroll-area is because the scroll-area is not currently scrollable.

For the scroll-area to be scrollable (lets say vertically for this example), the height of its content needs to exceed the scroll-area in height. Try putting dummy text i.e "lorem ipsum" text in the scroll-area (to be greater then the area itself) and setting a CSS value of the scroll-area to be overflow: scroll. The scroll-area will be scrollable and therefore the scroll event will fire (on the scroll-area). I have tested this and it works.

Note: The reason the scroll event can be detected on the window (in your code) is because the height of the content of the window (i.e the scroll-area and all other elements together) is greater than the height of the window itself so the window is therefore scrollable.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

#scroll-area{
/*give the scroll-area a smaller height for this example*/
height:500px; 
background:#ccc;
overflow: scroll;
}
</style>
<script>
//declare the interval variable here to avoid the error when 'clearing' the interval later.
var isScrolling;
document.addEventListener("DOMContentLoaded", function(event) { 
    scroller();
});
  function scroller(){        
        var scrolling_area = document.getElementById("scroll-area");
        console.log(scrolling_area); //shows good div
        scrolling_area.addEventListener('scroll', function (event) {
            event.preventDefault();
            if(isScrolling != null){
              clearTimeout(isScrolling);
            }
            isScrolling = setTimeout(function () {
                //this prints now fine.
                console.log('User stops scrolling');
            }, 66);
        }, false);
    }
</script>

</head>
<body>

  <div id="scroll-area">
    What is Lorem Ipsum?
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
    when an unknown printer took a galley of type and scrambled it to make a type 
    specimen book. It has survived not only five centuries, but also the leap into 
    electronic typesetting, remaining essentially unchanged. It was popularised in 
    the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
    and more recently with desktop publishing software like Aldus PageMaker 
    including versions of Lorem Ipsum.

    Why do we use it?
    It is a long established fact that a reader will be distracted by the readable 
    content of a page when looking at its layout. The point of using Lorem Ipsum is 
    that it has a more-or-less normal distribution of letters, as opposed to using 
    'Content here, content here', making it look like readable English. Many 
    desktop publishing packages and web page editors now use Lorem Ipsum as their 
    default model text, and a search for 'lorem ipsum' will uncover many web sites 
    still in their infancy. Various versions have evolved over the years, sometimes 
    by accident, sometimes on purpose (injected humour and the like).
  </div>
</body>
</html>
user_26865810

Try to attach the event listener to a parent div of div#scrolling_area. It may work

user_105625380

I don't see how it would matter, but you aren't declaring your isScrolling variable with the proper notation. Im not sure why your thing isn't working, but this seems to work for me:

html

<div class="item">
  <h2>TOp</h2>
  <div class="inner" id="inner">
    <h1>HI!</h1>
    <h1>HI</h1>
    <h1>asdf</h1>
    <h1>asdf</h1>
  </div>
  <h2>Bottom</h2>
</div>

JS

const inner = document.getElementById('inner');

let isScrolling = false;

inner.addEventListener('scroll', (e) => { 
  isScrolling = true;

  let scrollCheck = setTimeout(function() {
    isScrolling = false;
    console.log("Checking is scrolling:: ", isScrolling);
  }, 100);
});

CSS

.item {
  overflow: scroll;
}

.inner {
  height: 50px;
  overflow: scroll;
}
user_29836090
Related