IE8 替代 window.scrollY？答案

【问题标题】：IE8 alternative to window.scrollY?IE8 替代 window.scrollY？
【发布时间】：2013-05-13 04:43:31
【问题描述】：

我正在尝试确定使用window.scrollY 向下滚动了多少像素。但这在 IE8 中不受支持。什么是安全的跨浏览器替代方案？

【问题讨论】：

尽可能使用 Mootools 或 jQuery 等库为您处理浏览器抽象。
不是跨浏览器版本的scrollX和scrollY、document.body.scrollLeft和document.body.scrollTop吗？
^^^^^ 是pageYOffset and document.body.scrollTop
@adeneo 如果我在我的回答中链接到那篇文章可以吗？
@Zenith - 当然，该页面上的示例 4 显示了获取滚动位置的跨浏览器方式，甚至考虑了缩放！

标签： javascript html internet-explorer-8 cross-browser

【解决方案1】：

window.scrollY 的跨浏览器兼容版本是document.documentElement.scrollTop。请参阅这篇Mozilla documentation 的“注释”部分，了解 IE8 及之前版本中完整、详细的解决方法。

As mentioned here、pageYOffset 是 window.scrollY 的另一种替代方案（请注意，这仅与 IE9+ 兼容）。

关于上面的链接，请查看 示例 4 以获得使用 document.documentElement.scrollTop 和 document.documentElement.scrollLeft 的完全兼容的方式来获取滚动位置（它甚至考虑了@adeneo 提到的缩放！） .

Here, try out the example for yourself!

【讨论】：

document.documentElement.scrollTop 在 Google Chrome 40 中给出 0
@McX 这是因为 Chrome 存在一个尚未解决的 bug（但从我看到的回复来看，它正在修复中）-code.google.com/p/chromium/issues/detail?id=157855
2016 年 1 月，仍未修复。
2016 年 11 月，仍未修复。
2018 年 4 月 4 日，已修复 :)

【解决方案2】：

如果您有正当理由不只是使用库来处理此类基本功能，请不要犹豫“不要重新发明轮子”。

Mootools is open source，你可以“窃取”它的实现，相关的 sn-ps：

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

这两个是决定您当前浏览器具有哪种兼容性模式的核心，然后是基于此使用window.pageYOffset 或document.body.scrollTop，甚至对于真正古老的有缺陷的浏览器使用document.html.scrollTop。

【讨论】：

【解决方案3】：

如果您使用的是 jQuery，我使用 $(window).scrollTop() 来获取 IE 8 中的 Y 位置。它似乎可以工作。

【讨论】：

【解决方案4】：

根据 Niels 的回答，当只需要 Y 坐标时，我提出了一个更紧凑的解决方案：

function get_scroll_y() {
    return window.pageYOffset || document.body.scrollTop || document.html.scrollTop;
}

【讨论】：

【解决方案5】：

如果你不需要经常使用它，就这样做：

var scroll = window.scrollY //Modern Way (Chrome, Firefox) 
|| document.documentElement.scrollTop (Old IE, 6,7,8)

【讨论】：

这行得通，但我认为你不需要第二个（window.pageYOffset）。虽然它可以工作，但所有较旧的 IE 浏览器都支持 document.documentElement.scrollTop 获取滚动位置的方式。较新的 IE 浏览器（“Edge”）支持 window.scrollY，如 MDN 中所述：developer.mozilla.org/en-US/docs/Web/API/Window/…

【解决方案6】：

在 Angular 中，我们使用：

  var windowEl = angular.element($window);
  scrolldist = windowEl.scrollTop();

【讨论】：

反正是jQuery's scrollTop..

【解决方案7】：

基于 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
    }
})();

根据Mozilla documentation，正如上面生命周期所引用的，pageXOffset 属性是scrollX 属性的别名，所以严格来说没有必要。

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

在 Chrome、Firefox、Opera、Edge (8-Edge)、IE (7-11)、IE8 在 XP 上测试和工作

【讨论】：

【解决方案8】：

window.scrollY 和 window.scrollX 在所有现代浏览器（如 Chrome、FireFox 和 Safari）中都可以正常工作，但在 IE 中无法正常工作，因此要修复使用 window.pageXOffset 或 window.pageYOffset。

这是我为修复 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
}

【讨论】：