jQuery 滚动事件处理，如 Twitter 和 Facebook
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14338590/
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
Scroll event handling like Twitter and Facebook
提问by sultan
I've been trying to bind scrollevent to an element on the page, and on scroll load more content like Twitter or Facebook do.
我一直在尝试将滚动事件绑定到页面上的元素，并在滚动时加载更多内容，如 Twitter 或 Facebook。
HTML
HTML
<div id="main-content">
<ul class="event-list big row" id="event-list">
...
</ul>
</div>
CSS
CSS
#main-content {
width: 984px;
overflow: visible;
margin: 0 auto;
color: #101010;
width: 974px;
padding: 10px 0 7px 0;
}
#main-content .event-list.big {
width: 1080px;
padding: 0 0 20px 0;
}
JS code
JS代码
$('#event-list').scroll(function() {
var curScroll = $(this)[0].scrollTop,
maxScroll = $(this)[0].scrollHeight - $(this).height();
console.log(curScroll, ' :: ', maxScroll);
if ((curScroll >= maxScroll - 200) && !loading) {
loading = true;
$(this)[0].scrollTop = curScroll;
$('.loading').fadeIn('fast');
if (page <= $('.page').length) {
loadMore();
}
}
});
The scrollevent is not triggered when I scroll its even doesn't print out curScrolland maxScroll.
scroll当我滚动它甚至不打印出curScroll和maxScroll时，不会触发该事件。
What may cause the problem at all, maybe CSS styles are wrong or my jscode wrong?
什么可能导致问题，也许CSS样式错误或我的js代码错误？
回答by Dave
Here's a working example of what I believe you want with the scrolling event triggering. Use the div as a scrollable region by setting 'overflow: scroll'. Note: you will only get the scroll event if the list is long enough on the initial load. (See the height property on main-content. I'll leave the ajax loading up to you. :)
这是我相信您想要滚动事件触发的工作示例。通过设置“溢出：滚动”，将 div 用作可滚动区域。注意：如果列表在初始加载时足够长，您只会获得滚动事件。（请参阅 main-content 上的 height 属性。我会将 ajax 加载留给您。:)
CSS
CSS
#main-content {
width: 984px;
overflow: scroll;
margin: 0 auto;
color: #101010;
width: 974px;
height: 100px;
padding: 10px 0 7px 0;
}
#main-content .event-list.big {
width: 1080px;
padding: 0 0 20px 0;
}
Script
脚本
$(document).ready(function() {
$('#main-content').scroll(function() {
var curScroll = $(this)[0].scrollTop,
maxScroll = $(this)[0].scrollHeight - $(this).height();
console.log(curScroll, ' :: ', maxScroll);
if ((curScroll >= maxScroll - 200) && !loading) {
loading = true;
$(this)[0].scrollTop = curScroll;
$('.loading').fadeIn('fast');
if (page <= $('.page').length) {
loadMore();
}
}
});
});
HTML
HTML
<div id="main-content">
<ul class="eventlist big row" id="event-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
回答by Abhishek Sinha
When you set css property of your body something like
当你设置你的身体的 css 属性时
body {height: 100%;overflow: auto;} // or visible
Now, $(window).scroll(); will not work.
It will cause jquery scroll event to not work because the dom is not scrollable. So you must either remove overflow property or set it to scroll.
它会导致 jquery 滚动事件不起作用，因为 dom 不可滚动。因此，您必须删除溢出属性或将其设置为滚动。
回答by ohcibi
See http://api.jquery.com/scroll/
见http://api.jquery.com/scroll/
The scroll event is only triggered on elements like window, frame, iframe and ones that have overflow: (scroll|auto)and their content must be greater then the available width/height. So I suggest you add
滚动事件仅在 window、frame、iframe 等元素上触发，overflow: (scroll|auto)并且它们的内容必须大于可用的宽度/高度。所以我建议你添加
#event-list {
overflow: auto;
}
If you want to listen for when the user scrolls to a specific element, you should listen on the scroll event of window and then check for the scroll coordinates.
如果要监听用户何时滚动到特定元素，则应监听 window 的滚动事件，然后检查滚动坐标。
$(window).scroll(function() { /** ... **/ });
