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 .
Original function, which works on a blank page with no container 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
#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.
How would you have approached this problem?
UPDATES
Note, I created a new jsFiddle using the same code here: http://jsfiddle.net/leonwho/L9A6Q/
Also I notice that my console.logs never show unless I click inside the #scroll_screen
div?
Deleted the Codepen, got a little further with jsFiddle, using $('#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. The Alert should happen on scroll down
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').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.
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 :)
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.