开发者

How to determine if we're at the bottom of a page using Javascript/jQuery

开发者 https://www.devze.com 2023-01-31 05:17 出处:网络
There is nothing called scrollBottom(开发者_Python百科) in jQuery, so I can\'t do $(window).scrollBottom()==0

There is nothing called scrollBottom(开发者_Python百科) in jQuery, so I can't do $(window).scrollBottom()==0

Hope the question is clear from the title itself. Any help would be greatly appreciated. I'm mostly interested in IE7+, FF3.5+ (Chrome etc are bonus!)

Thanks!


you could use this function to check whether an element is visible (e.g. a element at the bottom of the page):

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

I implemented an endless scrolling effect (like in facebook) with it.

you can check each time, the user is scrolling the window:

function checkAndLoad(){
    if(isScrolledIntoView($('#footer'))){
        triggerSomething(); // 
    }
}
$(document).ready(function(){
    checkAndLoad();
    $(window).scroll(function(){
        checkAndLoad();
    });
});


<ironic>Use javascript.</ironic>

Browser support for this is a mixed bag. Non-IE you can use window.pageYOffset, with IE you have to use either document.body.scrollTop or document.documentElement.scrollTop depending on the browser version and compatability mode.

You may have to do some varying levels of mathematical manipualtion to the results - I don't have access to multiple browsers to test at work (I know) and I can't recall the detail of how these work offhand.


Check if this works

http://jsfiddle.net/sandeepan_nits/3Ys35/2/

I compared the e.pageY and $(document).height() but the fiddle example does not work accurately for all browsers and there is an offset problem. If I set an offset of 1 it works fine in ff.

If nothing else works perfect you may set different offsets based on browsers (IEs will need separate and others separate probably) or else replace the equal condition ( if(e.pageY == ($(document).height() - offset)) ) with a range check ( if((e.pageY < ($(document).height() + upperLimit)) && (e.pageY > ($(document).height() + lowerLimit))) ) if that is ok as per your requirement.

0

精彩评论

暂无评论...
验证码 换一张
取 消