[英]How to determine when user scrolls to bottom of container div? For Infinite Scroll
I'm preparing to develop infinate scroll on our website's dashboard, however I'm stuck at the moment on how to determine the bottom of the container div in my jsfiddle mockup .我正准备在我们网站的仪表板上开发无限滚动,但是我目前在如何确定我的jsfiddle 模型中容器 div 的底部被困住了。
Original function, which works on a blank page with no container div原始函数,在没有容器 div 的空白页面上工作
var wireInfinScroll = function() {
console.log('in wireInfinScroll');
$('#scroll_screen').scroll(function(){
console.log('scrolling...');
console.log(' ');
//if ($('#scroll_screen').scrollTop() == $('#content').height() - $('#scroll_screen').outerHeight()) {
if ($('#scroll_screen').scrollTop() == $('#content').height() - $('#scroll_screen').height()) {
// run our call for pagination
console.log('Bottom of Page!');
alert('Bottom of Page!');
}
});
}
wireInfinScroll();
CSS CSS
#scroll_screen {
overflow-y: auto;
background: pink;
}
I tried replacing window
with the div being scrolled ( #scroll_screen
) in my example, but can't get the alert to trigger.在我的示例中,我尝试用滚动的 div (
#scroll_screen
) 替换window
,但无法触发警报。
How would you have approached this problem?你会如何解决这个问题?
UPDATES更新
Note, I created a new jsFiddle using the same code here: http://jsfiddle.net/leonwho/L9A6Q/注意,我在这里使用相同的代码创建了一个新的 jsFiddle: http : //jsfiddle.net/leonwho/L9A6Q/
Also I notice that my console.logs never show unless I click inside the #scroll_screen
div?我还注意到,除非我在
#scroll_screen
div 内单击,否则我的 console.logs 永远不会显示?
Deleted the Codepen, got a little further with jsFiddle, using $('#scroll_screen').scroll(function(){
删除了 Codepen,使用 jsFiddle 更进一步,使用
$('#scroll_screen').scroll(function(){
Note!注意! When I remove
height: 100%
from the #content
div, then scroll down and back up I finally get my Alert , but this is still not correct.当我从
#content
div 中删除height: 100%
,然后向下滚动并向上滚动时,我终于得到了Alert ,但这仍然不正确。 The Alert should happen on scroll down警报应该在向下滚动时发生
css css
#content {
float: right;
width: 79%;
//height: 100%;
background: #f8f8f8;
}
$('#scroll_screen').height() - $('#content').height()
will give a negative value, because scroll_screen
's height is always less than content
's height, and that means scroll_screen
's scrollTop
will never be equal to a negative value, so replace $('#scroll_screen').height() - $('#content').height()
将给出一个负值,因为scroll_screen
的高度总是小于content
的高度,这意味着scroll_screen
的scrollTop
永远不会等于负值,所以替换
$('#scroll_screen').scrollTop() == $('#scroll_screen').height() - $('#content').height()
with与
$('#scroll_screen').scrollTop() >= if ( $('#scroll_screen').scrollTop() >= -($('#content').height() - $('#scroll_screen').height()) ))
(Greater than or equal just in-case the animation skips it.) (大于或等于以防动画跳过它。)
[EDIT] I noticed it scrolls to 200
, so if ($('#scroll_screen').scrollTop() >= 200)
should work. [编辑] 我注意到它滚动到
200
,所以if ($('#scroll_screen').scrollTop() >= 200)
应该可以工作。
You just have to check if (the scroll distance + the window height) >= (the offset top of the element + its height) in your scroll method.您只需要在滚动方法中检查(滚动距离+窗口高度)>=(元素的顶部偏移量+其高度)。
In this case, something like :在这种情况下,类似于:
$(window).scroll(function(){
if( ($(document).scrollTop() + $(window).height()) >= ($('#yourElement').offset().top + $('#yourElement').height()){
// Bottom of the element reached :)
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.