我需要检查用户是否停止在网站上滚动某些元素(使用鼠标滚轮而不是网站停止滚动)所以我在本机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,如果我使用窗口而不是#scrolling_area元素,一切正常.
window.addEventListener('scroll', function (event) {...});
但是,当我尝试使用我的div元素时,我看不到任何结果.我也试过使用带有和不带preventDefault()函数的监听器.我做错了什么或div#scrolling_area可能会导致一些问题？
解决方法:
这可能不是您解决问题所需的一切,因为我知道您的代码比您发布的代码大.
但是,滚动区域未在滚动区域上触发的原因是因为滚动区域当前不可滚动.
对于可滚动的滚动区域(对于此示例,请简单地说),其内容的高度需要超过滚动区域的高度.
尝试在滚动区域中放置虚拟文本,即“lorem ipsum”文本(大于区域本身),并将滚动区域的CSS值设置为溢出：滚动.
滚动区域将是可滚动的,因此滚动事件将触发(在滚动区域上).
我测试了这个并且它有效.
注意：可以在窗口(在代码中)检测到滚动事件的原因是因为窗口内容的高度(即滚动区域和所有其他元素在一起)大于窗口本身的高度所以因此窗口是可滚动的.
<!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>