Question

我需要检查用户是否停止滚动网站上的某些元素（停止使用鼠标滚轮而不是网站滚动），所以我为此在本地JS中编写了一些功能：

=E2-6

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>

第一个console.log（）显示良好的div，如果我使用window而不是#scrolling_area元素，那么一切也很好。

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元素时，看不到任何结果。我也尝试使用带有和不带有preventDefault（）函数的侦听器。我是在做错什么，还是div＃scrolling_area可能引起一些问题？

Answer 1

这可能不是解决问题所需的一切，因为我知道您的代码大于您发布的代码。

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

要使滚动区域可滚动（对于本示例，请垂直说），其内容的高度需要超过滚动区域的高度。尝试在滚动区域中放置伪文本，即“ 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>

Answer 2

尝试将事件侦听器附加到div＃scrolling_area的父div。可能有效

Answer 3

我不知道这怎么回事，但是您并没有使用正确的符号声明isScrolling变量。我不确定为什么你的东西不起作用，但是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;
}

事件监听器看不到div＃id元素并与之配合

3 个答案: