Question

我有下面的代码将打开一个模态窗口。这适用于IE 8，但不适用于Chrome或FF。我是跨浏览器功能的新手。

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.width)/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;
}

任何人都可以帮助制作此代码Chrome＆amp; FF兼容吗？
我尝试将window.top更改为window.parent，但没有运气此外，编码多个浏览器时要记住的任何规则（我浏览过但没有找到任何一组跨浏览器兼容性规则）？

更新
问题是在IE中，这个模态窗口出现在大约一半的屏幕尺寸中。在FF和Chrome中，模态窗口大约是一美元硬币的大小。

Answer 1

根据您浏览器的当前呈现模式，您可能需要使用document.documentElement.scrollTop代替document.body.scrollTop（同样适用于scrollLeft）。

在an Evolt article by Peter-Paul Koch（quirksmode.org成名）中有一些关于这个问题的好背景，但它是从2002年开始的，现在有点过时了。

正如其他人的建议，2011年解决此类问题的最简单方法是使用现有的JavaScript框架。 jQuery非常受欢迎（特别是在StackOverflow用户中），但是there are many others as well。

Answer 2

另一种解决方案：

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

Answer 3

你可以使用：

window.pageYOffset

Answer 4

如果您没有看到对不必要的第三方图书馆的需求，您可以尝试：

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

这很hacky，但它仍然比JQuery更好。

Answer 5

我遇到了同样的问题，并且检查了我的代码是否存在设置的溢出，并删除了：

overflow:auto;

从另一个元素开始起作用

Answer 6

我最终不得不每隔x毫秒检查一次解决方法。不理想，但是对我有用，因为我找不到其他解决方案。请注意，这是ES6代码，因此，如果需要，必须手动使其与ES5兼容，或者使用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);
    }
});

Answer 7

我推荐像chrispanda建议的jQuery。 jQuery有一个内置的滚动事件，其余的只需几行就可以编写来操作html / css。

http://api.jquery.com/

window.top.document.body.scrollTop无法在Chrome或FireFox中运行

7 个答案: