4

For displaying a dialog, I need to know the current scroll position of the window. This is done within a $(document).ready block of jQuery.

Internet Explorer, however, breaks things when having to remember the scroll position.

You can try this by opening the following HTML code in IE, scroll down a bit and hit reload (sorry I didn't create a fiddle – because of the scrolling it would not work there).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"     
type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    alert(document.body.scrollTop);
    alert(document.body.scrollTop);
  });
</script>

<div style="height:4000px;">
</div>

The first alert shows 0, the second one shows the correct number. It also works without the first alert if I use setTimeout and wait for (in my case) 20msecs - which of couse might take another amount of time in other circumstances and therefore is no solution.

I think the problem is that IE first scrolls top, does some things, and then, after a while, restores the previous scrolling position (probably it has to render things first in order to make sure that this scroll position still exists at all).

Is there any propper way of getting the browser scroll right at once?

4
  • can you somehow rule out that $().ready() is causing the delays?
    – reto
    Apr 26, 2012 at 15:45
  • No, I don't think it's causing the delays but rather called / hooked in too early: IE does not seem fully ready at the time the ready() callbacks are called.
    – sudoremo
    Apr 30, 2012 at 6:47
  • Is your web application very slow by performance?
    – Rustam
    Aug 4, 2012 at 23:19
  • I don't think that that's the problem – try the sample above (should not be of slow performance, right?).
    – sudoremo
    Aug 7, 2012 at 9:03

1 Answer 1

0

There are several properties to get page scroll, and it's different in every browser. Here is a function I wrote in order to receive the correct scroll:

function getScroll(type)
{
    type = type || 'top';

    var result = 0;
    var scroll = 0;
    if (type === 'top')
    {
        if (ISQ.Http.browser.app !== 'ie' || ISQ.Http.browser.isIE9)
            scroll = window.pageYOffset;
        if (ISQ.Http.browser.app !== 'ie')
            scroll = returnMaxScroll(scroll, window.scrollY);
        scroll = returnMaxScroll(scroll, document.body.scrollTop);
        scroll = returnMaxScroll(scroll, document.documentElement.scrollTop);
        scroll = returnMaxScroll(scroll, document.body.parentNode.scrollTop);
    }
    else if (type === 'left')
    {
        if (ISQ.Http.browser.app !== 'ie' || ISQ.Http.browser.isIE9)
            scroll = window.pageXOffset;
        if (ISQ.Http.browser.app !== 'ie')
            scroll = returnMaxScroll(scroll, window.scrollX);
        scroll = returnMaxScroll(scroll, document.body.scrollLeft);
        scroll = returnMaxScroll(scroll, document.documentElement.scrollLeft);
        scroll = returnMaxScroll(scroll, document.body.parentNode.scrollLeft);
    }
    else if (type === 'height')
    {
        switch (ISQ.Http.browser.app)
        {
            case "chrome":
            case "ff":
            case "opera":
            case "safari":
                // iframe
                if (window.top === window)
                    scroll = document.documentElement.scrollHeight;
                // top window
                else
                    scroll = document.body.scrollHeight;
                break;
            default:
                scroll = returnMaxScroll(scroll, document.body.scrollHeight);
                scroll = returnMaxScroll(scroll, document.documentElement.scrollHeight);
                scroll = returnMaxScroll(scroll, document.body.parentNode.scrollHeight);
                break;

        }
    }
    else if (type === 'width')
    {
        scroll = returnMaxScroll(scroll, document.body.scrollWidth);
        scroll = returnMaxScroll(scroll, document.documentElement.scrollWidth);
        scroll = returnMaxScroll(scroll, document.body.parentNode.scrollWidth);
    }

    return scroll;
}
function returnMaxScroll(value1, value2)
{
    if (value1 > value2) return value1;
    return value2;
}
FYI: you may need to implement these booleans:
- ISQ.Http.browser.app !== 'ie'
- ISQ.Http.browser.isIE9

I hope it'll help you :)

2
  • Thank's a lot! I'll try it asap!
    – sudoremo
    Aug 21, 2012 at 12:24
  • what is the test for ie8? Mar 3, 2016 at 15:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.