在 Chrome 或 FireFox 中，window.top.document.body.scrollTop 不起作用

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和FF中兼容吗？
我尝试将 window.top 改为 window.parent 但没有成功。 此外，编写适用于多个浏览器的代码时需要注意什么规则（我已经浏览过，但并没有找到一组适用于跨浏览器兼容性的规则）？

更新：
问题是在IE中，该模态窗口出现在大约一半的屏幕大小上。 在Firefox和Chrome中，模态窗口的大小大约为一个美元硬币。

- DNR

---

你是否考虑过使用类似jQuery的工具来解决跨浏览器功能的问题？ - chrispanda

@DotNetRookie：如果您能发布实际的错误消息，您将获得更多帮助。Chrome和Firefox都有一个“JavaScript控制台”视图，显示来自JavaScript代码的错误和警告消息。 - Daniel Pryden

@Daniel，从技术上讲并没有错误信息。模态窗口在FF和Chrome中显示的尺寸比设计的要小得多。 - DNR

Answer 1

根据您的浏览器当前的呈现模式，您可能需要使用document.documentElement.scrollTop而不是document.body.scrollTop（对于scrollLeft同样如此）。

关于这个问题，Peter-Paul Koch的Evolt文章提供了一些很好的背景知识（他是quirksmode.org的创始人），但它是2002年的，现在有点过时了。

正如其他人在这里建议的那样，解决这种问题的最简单方法是在2011年使用现有的JavaScript框架。jQuery非常受欢迎（特别是在StackOverflow用户中），但还有许多其他框架。

- Daniel Pryden

---

这在2017年仍然适用吗？我觉得为了如此简单的事情我不应该使用第三方库，这似乎很荒谬。 - user7158855

document.documentElement.scrollTop在现代浏览器中工作正常。 - Mithun Jack

Answer 2

另一种解决方案：

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

- paipai

Answer 3

你可以使用：

window.pageYOffset

。该属性与获取滚动条纵向位置有关。

- zsimo

---

zsimo，也许您可以详细说明一下这个函数的作用以及OP在哪里可以找到相关参考资料。这将提高您回答的质量。 - Fildor

我认为在Firefox中使用jQuery解决document.body.scrollTop返回0的问题并不必要。只需使用window.pageYOffset来获取页面滚动时距离顶部的距离：https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollYSimone - zsimo

对我有用。Chrome，IE9，Firefox。感谢@zsimo！ - bahoo

在Chrome、IE10和Firefox中对我有效。 - Joe Naber

Answer 4

如果您不认为需要使用不必要的第三方库，可以尝试以下方法：

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

虽然有点取巧，但它仍比JQuery更好。

- user7158855

---

这个答案是错误的。你肯定没有尝试过这段代码。 - Elmue

Answer 5

我遇到了同样的问题，检查了我的代码是否存在集合溢出，并将其删除：

overflow:auto;

从另一个元素起作用了

- Nienke

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);
    }
});

- Luke Madhanga

Answer 7

我建议使用像chrispanda所建议的jQuery。jQuery具有内置的滚动事件，其余部分可以用几行代码编写来操作HTML / CSS。

http://api.jquery.com/

- jamesfzhang