Html IE8 替代 window.scrollY?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16618785/
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
IE8 alternative to window.scrollY?
提问by Jake Wilson
I'm trying to determine how many pixels down I've scrolled using window.scrollY
. But this isn't supported in IE8. What is the safe, cross-browser alternative?
我正在尝试确定我使用window.scrollY
. 但这在 IE8 中不受支持。什么是安全的跨浏览器替代方案?
回答by dsgriffin
The cross-browser compatible version for window.scrollY
is document.documentElement.scrollTop
. Please see the 'Notes' section of this piece of Mozilla documentationfor a full, detailed workaround in IE8 and before.
的跨浏览器兼容版本window.scrollY
是document.documentElement.scrollTop
. 请参阅这篇Mozilla 文档的“注释”部分,了解 IE8 及更早版本中完整、详细的解决方法。
As mentioned here, pageYOffset
is another alternative to window.scrollY (note though that this is only IE9+ compatible).
正如这里提到的, pageYOffset
是 window.scrollY 的另一种替代方法(请注意,这仅与 IE9+ 兼容)。
In regard to the link above, check Example 4for a fully compatible way to get the scroll position (it even accounts for zoom as @adeneo mentioned!) using document.documentElement.scrollTop
and document.documentElement.scrollLeft
.
关于上面的链接,请检查示例 4以获取完全兼容的方式来获取滚动位置(它甚至考虑了@adeneo 提到的缩放!)使用document.documentElement.scrollTop
和document.documentElement.scrollLeft
。
回答by Tom Sarduy
If you don't have to use it a lot, just do:
如果您不必经常使用它,请执行以下操作:
var scroll = window.scrollY //Modern Way (Chrome, Firefox)
|| document.documentElement.scrollTop (Old IE, 6,7,8)
回答by Daniel
If you're using jQuery, I used $(window).scrollTop() to get the Y position in IE 8. It seemed to work.
如果您使用 jQuery,我使用 $(window).scrollTop() 来获取 IE 8 中的 Y 位置。它似乎有效。
回答by Niels Keurentjes
If you have a valid reason for not just using a library to handle this kind of base functionality, don't hesitate 'not to re-invent the wheel'.
如果您有正当理由不只是使用库来处理这种基本功能,请不要犹豫“不要重新发明轮子”。
Mootools is open source, and you can just 'steal' its implementation, relevant snippets:
Mootools 是开源的,你可以“窃取”它的实现,相关片段:
getScroll: function(){
var win = this.getWindow(), doc = getCompatElement(this);
return {x: win.pageXOffset || doc.scrollLeft, y: win.pageYOffset || doc.scrollTop};
}
function getCompatElement(element){
var doc = element.getDocument();
return (!doc.compatMode || doc.compatMode == 'CSS1Compat') ? doc.html : doc.body;
}
These 2 are the core of deciding which compatibility mode your current browser it has, and then whether to use window.pageYOffset
or document.body.scrollTop
based on that or even document.html.scrollTop
for really ancient buggy browsers.
这两个是决定您当前浏览器具有哪种兼容模式的核心,然后决定是否使用window.pageYOffset
或document.body.scrollTop
基于该模式,甚至是document.html.scrollTop
用于真正古老的有缺陷的浏览器。
回答by Greg Prisament
Based on Niels' answer, I come up with a slightly more compact solution when just the Y coord is needed:
根据 Niels 的回答,当只需要 Y 坐标时,我想出了一个稍微紧凑的解决方案:
function get_scroll_y() {
return window.pageYOffset || document.body.scrollTop || document.html.scrollTop;
}
回答by Dev Ops
Based on Mozilla, and answers above, I have a created the functions below to more easily get the coords:
基于 Mozilla 和上面的答案,我创建了以下函数以更轻松地获取坐标:
var windowEl = (function () {
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
function scroll() {
return { left: scrollLeft, top: scrollTop };
};
function scrollLeft() {
return window.scrollX || window.pageXOffset || (isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft);
};
function scrollTop() {
return window.scrollY || window.pageYOffset || (isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop);
};
return {
scroll: scroll,
scrollLeft: scrollLeft,
scrollTop: scrollTop
}
})();
According to the Mozilla documentation, as cited by lifetimes above, the The pageXOffset
property is an alias for the scrollX
property, so is stictly speaking not necessary.
根据上面的生命周期所引用的Mozilla 文档,ThepageXOffset
属性是该属性的别名scrollX
,因此严格来说没有必要。
Anyhoo, usage is:
Anyhoo,用法是:
var scroll = windowEl.scroll();
// use scroll.left for the left scroll offset
// use scroll.top for the top scroll offset
var scrollLeft = windowEl.scrollLeft();
// the left scroll offset
var scrollTop = windowEl.scrollTop();
// the top scroll offset
Tested & works on Chrome, Firefox, Opera, Edge (8-Edge), IE (7-11), IE8 on XP
在 XP 上的 Chrome、Firefox、Opera、Edge (8-Edge)、IE (7-11)、IE8 上测试并运行
回答by dxpkumar
window.scrollY & window.scrollX works fine in all modern browers like (Chrome, FireFox & Safari) but does not work in IE so to fix the use window.pageXOffset or window.pageYOffset.
window.scrollY 和 window.scrollX 在所有现代浏览器(如 Chrome、FireFox 和 Safari)中都可以正常工作,但在 IE 中不起作用,因此要修复使用 window.pageXOffset 或 window.pageYOffset。
Here is a sample code I wrote to fix ie issue so that the programmatic scrolling works in all browsers including IE
这是我为修复 ie 问题而编写的示例代码,以便程序化滚动适用于包括 IE 在内的所有浏览器
if((window.scrollY || window.pageYOffset) >= 1100){
//alert('Switch to land');
$('#landTrst').trigger('click'); // your action goes here
}else if ((window.scrollY || window.pageYOffset) <= 900) {
//alert('Switch to Refernce Letter');
$('#resLet').trigger('click'); // your action goes here
}
回答by Soferio
In angular, we use:
在角度中,我们使用:
var windowEl = angular.element($window);
scrolldist = windowEl.scrollTop();