jQuery 窗口滚动事件不会触发答案

【问题标题】：jQuery window scroll event does not fire upjQuery 窗口滚动事件不会触发
【发布时间】：2011-08-06 21:30:16
【问题描述】：

我正在尝试通过 jquery 对 div 实现一个简单的“留在视口内”行为。为此，我需要将一个函数绑定到窗口的滚动事件，但我似乎无法让它启动：没有任何反应。我试过一个简单的alert()，console.log() 没有骰子。知道我做错了什么吗？

这段代码：

$(window).scroll(function () {  
            console.log("scrolling");           
});

位于 script.js 中，位于我的 html 文件的最底部

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

【问题讨论】：

【解决方案1】：

您的 CSS 实际上将文档的其余部分设置为不显示溢出，因此文档本身不会滚动。最简单的解决方法是将事件绑定到正在滚动的东西，在你的情况下是div#page。

所以很容易改变：

$(document).scroll(function() {  // OR  $(window).scroll(function() {
    didScroll = true;
});

到

$('div#page').scroll(function() {
    didScroll = true;
});

【讨论】：

【解决方案2】：

我的问题是我的 css 中有这段代码

html,
body {
    height: 100%;
    width: 100%;
    overflow: auto;
}

一旦我删除它，窗口上的滚动事件就会再次触发

【讨论】：

我在这里遇到了同样的问题。看起来 scroll 事件不能很好地处理带有 css overflow 的元素。这甚至用scrollTop 来干扰动画...感谢分享！
为了将来参考，在我的例子中，尝试使用 materializecss 的图钉组件 (materializecss.com/pushpin.html) 不起作用，因为 height:100% 在 html 和 body 上也是如此！

【解决方案3】：

$('#div').scroll(function () {
   if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight-1) {

     //fire your event


    }
}

【讨论】：

【解决方案4】：

解决办法是：

 $('body').scroll(function(e){
    console.log(e);
});

【讨论】：

【解决方案5】：

无论您尝试什么，对谁都不起作用（比如我）： <element onscroll="myFunction()"></element> 像魅力一样工作

正如他们在 W3 学校中所解释的那样 https://www.w3schools.com/tags/ev_onscroll.asp

【讨论】：

【解决方案6】：

似乎没有什么对我有用，但这成功了

$(parent.window.document).scroll(function() {
    alert("bottom!");
});

【讨论】：

【解决方案7】：

在我的情况下，你应该把函数放在$(document).ready

$(document).ready(function () {
    $('div#page').on('scroll', function () {
     ...
    });
});

【讨论】：

【解决方案8】：

$(document).ready(function(){
  //do something
});

【讨论】：