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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:29:51  来源:igfitidea点击:

IE8 alternative to window.scrollY?

javascripthtmlinternet-explorer-8cross-browser

提问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.scrollYis document.documentElement.scrollTop. Please see the 'Notes' section of this piece of Mozilla documentationfor a full, detailed workaround in IE8 and before.

的跨浏览器兼容版本window.scrollYdocument.documentElement.scrollTop. 请参阅这篇Mozilla 文档的“注释”部分,了解 IE8 及更早版本中完整、详细的解决方法。

As mentioned here, pageYOffsetis 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.scrollTopand document.documentElement.scrollLeft.

关于上面的链接,请检查示例 4以获取完全兼容的方式来获取滚动位置(它甚至考虑了@adeneo 提到的缩放!)使用document.documentElement.scrollTopdocument.documentElement.scrollLeft

Here, try out the example for yourself!

在这里,自己试试这个例子!

回答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.pageYOffsetor document.body.scrollTopbased on that or even document.html.scrollTopfor really ancient buggy browsers.

这两个是决定您当前浏览器具有哪种兼容模式的核心,然后决定是否使用window.pageYOffsetdocument.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 pageXOffsetproperty is an alias for the scrollXproperty, 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();