Javascript 事件侦听器不'；看不到div#id元素并与之合作_Javascript_Addeventlistener

Javascript 事件侦听器不'；看不到div#id元素并与之合作

javascript

Javascript 事件侦听器不'；看不到div#id元素并与之合作,javascript,addeventlistener,Javascript,Addeventlistener,我需要检查用户是否停止滚动网站上的某些元素（使用鼠标滚轮而不是网站停止滚动），因此我用原生JS编写了一些函数： document.addEventListener（“DOMContentLoaded”，函数（事件）{ 滚动条（）； }); 函数滚动条（）{ var scrolling_area=document.getElementById（“滚动区域”）； console.log（滚动_区域）；//显示良好的div 滚动区域。addEventListener（'scroll'，函数（事件）{

我需要检查用户是否停止滚动网站上的某些元素（使用鼠标滚轮而不是网站停止滚动），因此我用原生JS编写了一些函数：

document.addEventListener（“DOMContentLoaded”，函数（事件）{
滚动条（）；
});
函数滚动条（）{
var scrolling_area=document.getElementById（“滚动区域”）；
console.log（滚动_区域）；//显示良好的div
滚动区域。addEventListener（'scroll'，函数（事件）{
event.preventDefault（）；
清除超时（IsCrolling）；
isScrolling=setTimeout（函数（）{
log（“用户停止滚动”）；
}, 66);
}，假）；
}

尝试将事件侦听器附加到div滚动区域的父div。它可能会工作

我不知道这有什么关系，但是您没有用正确的符号声明您的

IsCrolling

变量。我不知道你的东西为什么不起作用，但是：

html

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>

要使滚动区域可滚动（本例中为垂直），其内容的高度需要超过滚动区域的高度。尝试将虚拟文本，即“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>


#滚动区{
/*在本例中，为滚动区域指定一个较小的高度*/
高度：500px；
背景：#ccc；
溢出：滚动；
}
//在此处声明interval变量以避免以后“清除”间隔时出错。
变异系数；
addEventListener（“DOMContentLoaded”，函数（事件）{
滚动条（）；
});
函数滚动条（）{
var scrolling_area=document.getElementById（“滚动区域”）；
console.log（滚动_区域）；//显示良好的div
滚动区域。addEventListener（'scroll'，函数（事件）{
event.preventDefault（）；
如果（isScrolling！=null）{
清除超时（IsCrolling）；
}
isScrolling=setTimeout（函数（）{
//这张照片现在印得很好。
log（“用户停止滚动”）；
}, 66);
}，假）；
}
什么是Lorem Ipsum？
Lorem Ipsum只是印刷和排版行业的虚拟文本。
自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，
当一个不知名的印刷商拿着一个铅字厨房，把它拼凑成一个铅字
样本书。它不仅存活了五个世纪，而且还跨越了
电子排版，基本保持不变。它在中国很流行
20世纪60年代，随着包含Lorem Ipsum段落的Letraset表单的发布，
最近，像Aldus PageMaker这样的桌面发布软件
包括Lorem Ipsum的版本。
我们为什么要用它？
读者会被可读的内容分散注意力，这是一个由来已久的事实
查看页面布局时的页面内容。使用Lorem Ipsum的要点是
与使用
“这里的内容，这里的内容”，使它看起来像可读的英语。许多的
桌面发布包和网页编辑器现在使用Lorem Ipsum作为它们的
默认模型文本和搜索“lorem ipsum”将发现许多网站
仍处于婴儿期。多年来，各种版本不断演变，有时
偶然的，有时是故意的（注入的幽默等）。

您是否有一些HTML和CSS代码来提供完整的示例？这是动态生成的代码，显示了d3.js的折线图，因此有很多代码。我尝试附加的元素是图表中所有其他元素（包括valueline、grid、Axis、ticks和指针）的父元素。您是否在代码前面的某个地方定义了“IsCrolling”？根据您单独发布的代码，它将是未定义的，我尝试在函数之前定义，但效果相同。您的滚动区域不可滚动。。。。您正在滚动页面，而不是div。这里有一个问题-div是我的；我尝试附加的是父元素。是的，你是对的。我的滚动区域需要更具滚动性。谢谢你的建议，现在我知道我做错了什么。@Reynolds没问题：）很高兴我帮了忙：）

.item {
  overflow: scroll;
}

.inner {
  height: 50px;
  overflow: 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>