window.top.document.body.scrollTop not working in Chrome or FireFox

I have the code below that will open a modal window. This works in IE 8 but not in Chrome or FF. I am new to the world of cross browser functionality.

function ShowModal(WindowID,FramesetID)
{
    window.onscroll = function () { window.top.document.getElementById(WindowID).style.top = window.top.document.body.scrollTop; };
    window.top.document.getElementById(WindowID).style.display = "block";
    window.top.document.getElementById(WindowID).style.top = document.body.scrollTop;

    widthv=parseInt(parseInt(screen.w开发者_运维问答idth)/1.50);
    heightv=parseInt(parseInt(screen.height)/1.50); 

    window.top.document.getElementById(FramesetID).style.width=widthv;
    window.top.document.getElementById(FramesetID).style.height=heightv;
}

Can anyone help in making this code Chrome & FF compatible?

I tried changing window.top to window.parent but no luck Also, any rules to keep in mind when coding for multiple browsers (I have browsed through but didn't quite find any set of rules for cross browser compatibility)?

Update:

The issue is that in IE, this modal window appears in approximately half the screensize. In FF and Chrome, the modal window appears about the size of a dollar coin.

Depending on your browser's current rendering mode, you may need to use document.documentElement.scrollTop instead of document.body.scrollTop (and likewise for scrollLeft).

There's some good background on this problem in an Evolt article by Peter-Paul Koch (of quirksmode.org fame), but it's from 2002 and is a bit dated now.

As others here are suggesting, the easiest way to solve this kind of problem in 2011 is to just use an existing JavaScript framework. jQuery is quite popular (especially among StackOverflow users), but there are many others as well.

Another solution:

(document.documentElement.scrollTop || document.body.scrollTop)

you can use:

window.pageYOffset

If you don't see the need for unecessary third party libraries, you could try:

var scrollTop = (document.documentElement || document.body.parentNode || document.body).scrollTop;

It's hacky, but it's still better than JQuery.

I had the same issue and i checked my code for a set overflow, removing:

overflow:auto;

from another element worked

I ended up having to check every x milliseconds as a workaround. Not ideal, but it worked for me as I couldn't find any other solution. Note, this is ES6 code, so if you need to, you'll have to make it ES5 compatible manually, or use Babel.

/**
 * Set the scroll top on load
 * @param {int} scrollTop The scrollTop
 */
let setScrollTop = scrollTop => {
    // Different browsers treat this differently, so set all
    window.scrollTop = scrollTop;
    window.document.body.scrollTop = scrollTop;
    window.document.documentElement.scrollTop = scrollTop;
};

/**
 * Jump to a page
 * @param {string} selector
 */
let jumpToPage = selector => {
    let i = 0;
    let top = document.querySelector(selector).offsetTop;
    let interval;

    interval = window.setInterval(() => {
        if ((document.body.scrollTop || document.documentElement.scrollTop) === top || i === 20) {
            window.clearInterval(interval);
            return;
        }

        setScrollTop(top);

        i++;
    }, 100);

    setScrollTop(top);
};

/**
 * On load
 */
window.addEventListener('load', () => {
    if (condition) {
        jumpToPage(selector);
    }
});

I'd recommend jQuery like chrispanda has suggested. jQuery has a built in scroll event and the rest can be written in just a few lines to manipulate the html / css.

http://api.jquery.com/