Javascript window.top.document.body.scrollTop 在 Chrome 或 FireFox 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7435843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
window.top.document.body.scrollTop not working in Chrome or FireFox
提问by DNR
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.
我有下面的代码将打开一个模式窗口。这适用于 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;
}
Can anyone help in making this code Chrome & FF compatible?
I tried changing window.topto window.parentbut 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)?
任何人都可以帮助使此代码与 Chrome 和 FF 兼容吗？
我尝试更改window.top为window.parent但没有运气此外，在为多个浏览器编码时要记住任何规则（我已经浏览过但没有完全找到任何跨浏览器兼容性规则集）？
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.
更新：
问题是在 IE 中，这个模态窗口出现在屏幕大小的大约一半。在 FF 和 Chrome 中，模态窗口的大小与一美元硬币差不多。
采纳答案by jamesfzhang
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.
我会像 chrispanda 建议的那样推荐 jQuery。jQuery 有一个内置的滚动事件，其余的可以用几行代码来操作 html/css。
回答by Daniel Pryden
Depending on your browser's current rendering mode, you may need to use document.documentElement.scrollTopinstead of document.body.scrollTop(and likewise for scrollLeft).
根据浏览器当前的渲染模式，您可能需要使用document.documentElement.scrollTop代替document.body.scrollTop（对于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.
Peter-Paul Koch 的一篇 Evolt 文章（在 quirksmode.org 中成名）中有关于这个问题的一些很好的背景，但它是从 2002 年开始的，现在有点过时了。
As others here are suggesting, the easiest way to solve this kind of problem in 2011 is to just use an existing JavaScript framework. jQueryis quite popular (especially among StackOverflow users), but there are many others as well.
正如这里的其他人所建议的那样，在 2011 年解决此类问题的最简单方法就是使用现有的 JavaScript 框架。 jQuery非常流行（尤其是在 StackOverflow 用户中），但还有很多其他的。
回答by paipai
Another solution:
另一种解决方案：
(document.documentElement.scrollTop || document.body.scrollTop)
回答by zsimo
you can use:
您可以使用：
window.pageYOffset
window.pageYOffset
回答by zsimo
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.
它是 hacky，但它仍然比 JQuery 好。
回答by Nienke
I had the same issue and i checked my code for a set overflow, removing:
我遇到了同样的问题，我检查了我的代码是否存在集合溢出，删除：
overflow:auto;
from another element worked
从另一个元素工作
回答by Luke Madhanga
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.
作为一种解决方法，我最终不得不每 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);
}
});
