我需要检查用户是否停止滚动网站上的某些元素(停止使用鼠标滚轮而非网站滚动),因此我为此在本地JS中编写了一些功能:

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);
}

第一个console.log()显示良好的div,同样,如果我使用window而不是#scrolling_area元素,则一切正常。
window.addEventListener('scroll', function (event) {...});

但是,当我尝试使用div元素时,看不到任何结果。我也尝试使用带有和不带有preventDefault()函数的侦听器。我是在做错什么,还是div#scrolling_area可能引起一些问题?

最佳答案

这可能不是解决问题所需要的全部,因为我知道您的代码大于您发布的代码。

但是,未在滚动区域上触发滚动事件的原因是因为滚动区域当前不可滚动。

为了使滚动区域可滚动(在本示例中为垂直方向),其内容的高度必须超过滚动区域的高度。
尝试在滚动区域中放置伪文本,即“lorem ipsum”文本(大于该区域本身),然后将滚动区域的CSS值设置为溢出:scroll。
滚动区域将是可滚动的,因此将触发滚动事件(在滚动区域上)。
我已经对此进行了测试,并且可以正常工作。

注意:之所以可以在窗口中(在您的代码中)检测到滚动事件,是因为窗口内容的高度(即,滚动区域和所有其他元素在一起)大于窗口本身的高度,因此因此,该窗口是可滚动的。

<!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>

07-24 09:44
查看更多