jQuery 窗口滚动事件没有启动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5686629/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery window scroll event does not fire up
提问by pixeline
I'm trying to implement a simple "stay inside the viewport" behaviour to a div via jquery. For that i need to bind a function to the scroll event of the window, but i can't seem to get it to fire up: nothing happens. I've tried a simple alert(), console.log() no dice. An idea what i'm doing wrong?
我正在尝试通过 jquery 对 div 实现一个简单的“留在视口内”行为。为此，我需要将一个函数绑定到窗口的滚动事件，但我似乎无法启动它：没有任何反应。我试过一个简单的 alert()，console.log() 没有骰子。知道我做错了什么吗？
This code :
此代码：
$(window).scroll(function () {
console.log("scrolling");
});
sits in script.js, located at the very bottom of my html file
位于 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>
UPDATETest URL: http://pixeline.eu/test/menu.php
更新测试网址：http: //pixeline.eu/test/menu.php
回答by Charlie Sheather
Your CSS is actually setting the rest of the document to not show overflow therefore the document itself isn't scrolling. The easiest fix for this is bind the event to the thing that is scrolling, which in your case is div#page.
您的 CSS 实际上将文档的其余部分设置为不显示溢出，因此文档本身不会滚动。对此最简单的解决方法是将事件绑定到正在滚动的事物，在您的情况下是div#page.
So its easy as changing:
所以它很容易改变：
$(document).scroll(function() { // OR $(window).scroll(function() {
didScroll = true;
});
to
到
$('div#page').scroll(function() {
didScroll = true;
});
回答by digitalzoomstudio
My issue was I had this code in my css
我的问题是我的 css 中有这段代码
html,
body {
height: 100%;
width: 100%;
overflow: auto;
}
Once I removed it, the scroll event on window fired again
一旦我删除它，窗口上的滚动事件再次触发
回答by Ashish Asodiya
$('#div').scroll(function () {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight-1) {
//fire your event
}
}
回答by mallocthePD
To whom its just not working to (like me) no matter what you tried:
<element onscroll="myFunction()"></element>works like a charm
无论您尝试什么，它都无法（像我一样）对谁起作用：
<element onscroll="myFunction()"></element>就像魅力一样
exactly as they explain in W3 schools https://www.w3schools.com/tags/ev_onscroll.asp
正如他们在 W3 学校中解释的那样 https://www.w3schools.com/tags/ev_onscroll.asp
回答by Pan Bouradas
Thr solution is:
解决办法是：
$('body').scroll(function(e){
console.log(e);
});
回答by Ahmad
In my case you should put the function in $(document).ready
在我的情况下，你应该把函数放在 $(document).ready
$(document).ready(function () {
$('div#page').on('scroll', function () {
...
});
});
回答by LegionDev
Nothing seemd to work for me, but this did the trick
似乎没有什么对我有用，但这确实有效
$(parent.window.document).scroll(function() {
alert("bottom!");
});
回答by MikeM
Try 1) declaring your jQuery <script>in the <head>or 2) wrap your .scroll()event with $(document).ready()or 3) both
尝试1）声明你的jQuery<script>中<head>或2）包装你.scroll()与事件$(document).ready()或3）两者
