Skip to main content

Cross-browser method for detecting the scrollTop of the browser window



What is the best cross-browser way to detect the scrollTop of the browser window? I prefer not to use any pre-built code libraries because this is a very simple script, and I don't need all of that deadweight.





Source: Tips4all

Comments

  1. function getScrollTop(){
    if(typeof pageYOffset!= 'undefined'){
    //most browsers
    return pageYOffset;
    }
    else{
    var B= document.body; //IE 'quirks'
    var D= document.documentElement; //IE with doctype
    D= (D.clientHeight)? D: B;
    return D.scrollTop;
    }
    }

    alert(getScrollTop())

    ReplyDelete
  2. If you don't want to include a whole JavaScript library, you can often extract the bits you want from one.

    For example, this is essentially how jQuery implements a cross-browser scroll(Top|Left):

    function getScroll(method, element) {
    // The passed in `method` value should be 'Top' or 'Left'
    method = 'scroll' + method;
    return (element == window || element == document) ? (
    self[(method == 'scrollTop') ? 'pageYOffset' : 'pageXOffset'] ||
    (browserSupportsBoxModel && document.documentElement[method]) ||
    document.body[method]
    ) : element[method];
    }
    getScroll('Top', element);
    getScroll('Left', element);


    Note: you'll notice that the above code contains a browserSupportsBoxModel variable which is undefined. jQuery defines this by temporarily adding a div to the page and then measuring some attributes in order to determine whether the browser correctly implements the box model. As you can imagine this flag checks for IE. Specifically, it checks for IE 6 or 7 in quirks mode. Since the detection is rather complex, I've left it as an exercise for you ;-), assuming you have already used browser feature detection elsewhere in your code.

    Edit: If you haven't guessed already, I strongly suggest you use a library for these sorts of things. The overhead is a small price to pay for robust and future-proof code and anyone would be much more productive with a cross-browser framework to build upon. (As opposed to spending countless hours banging your head against IE).

    ReplyDelete
  3. to save you all the trouble use a framework such as jquery or mootools
    that calculates all these values in one line (cross browser)
    in mootools its $('element').getTop();
    in jquery you will need a plugin named dimensions if i remember correctly
    although most of the time even without a framework you can actually use element.getScrollTop(); to get what you'll need
    the only problem is on IE7 and below this calculation is somewhat buggy as it doesn not take the position value of the element into consideration
    for example if you got a position: absolute css attribute for that element
    the calculation is performed on the parent element of that element

    ReplyDelete
  4. YUI 2.8.1 code does this:

    function getDocumentScrollTop(doc)
    {
    doc = doc || document;

    //doc.body.scrollTop is IE quirkmode only
    return Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);
    }


    I think jQuery 1.4.2 code (a bit translated for humans) and supposing I understood it properly does this:

    function getDocumentScrollTop(doc)
    {
    doc = doc || document;
    win = doc.defaultView || doc.parentWindow; //parentWindow is for IE < 9

    result = 0;
    if("pageYOffset" in win) //I'don't know why they use this, probably they tested it to be faster than doing: if(typeof win.pageYOffset !== 'undefined')
    result = win.pageYOffset;
    else
    result = (jQuery.support.boxModel && document.documentElement.scrollTop) ||
    document.body.scrollTop;

    return result;
    }


    Unfortunatley extracting the value of jQuery.support.boxModel is almost impossible because you would have to add a temporary child element into document and do the same tests jQuery does.

    ReplyDelete

Post a Comment

Popular posts from this blog

Slow Android emulator

I have a 2.67 GHz Celeron processor, 1.21 GB of RAM on a x86 Windows XP Professional machine. My understanding is that the Android emulator should start fairly quickly on such a machine, but for me it does not. I have followed all instructions in setting up the IDE, SDKs, JDKs and such and have had some success in staring the emulator quickly but is very particulary. How can I, if possible, fix this problem?

CCNA 3 Final Exam => latest version

1 . Which security protocol or measure would provide the greatest protection for a wireless LAN? WPA2 cloaking SSIDs shared WEP key MAC address filtering   2 . Refer to the exhibit. All trunk links are operational and all VLANs are allowed on all trunk links. An ARP request is sent by computer 5. Which device or devices will receive this message? only computer 4 computer 3 and RTR-A computer 4 and RTR-A computer 1, computer 2, computer 4, and RTR-A computer 1, computer 2, computer 3, computer 4, and RTR-A all of the computers and the router   3 . Refer to the exhibit. Hosts A and B, connected to hub HB1, attempt to transmit a frame at the same time but a collision occurs. Which hosts will receive the collision jamming signal? only hosts A and B only hosts A, B, and C only hosts A, B, C, and D only hosts A, B, C, and E   4 . Refer to the exhibit. Router RA receives a packet with a source address of 192.168.1.65 and a destination address of 192.168.1.161...