46

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

4

8 回答 8

110

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

如此处所述， pageYOffset是 window.scrollY 的另一种替代方案（请注意，这仅与 IE9+ 兼容）。

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

在这里，你自己试试这个例子！

于 2013-05-17T22:35:34.850 回答
15

如果您不必经常使用它，只需执行以下操作：

var scroll = window.scrollY //Modern Way (Chrome, Firefox) 
|| document.documentElement.scrollTop (Old IE, 6,7,8)
于 2015-07-16T17:05:24.760 回答
5

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

于 2014-07-24T14:28:54.330 回答
3

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

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

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

于 2013-05-17T22:35:42.893 回答
1

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

function get_scroll_y() {
    return window.pageYOffset || document.body.scrollTop || document.html.scrollTop;
}
于 2014-09-03T17:34:53.930 回答
1

基于 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 文档，正如上面的生命周期所引用的，该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 on XP 上测试和工作

于 2017-07-03T09:09:00.343 回答
0

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
}
于 2018-02-08T08:36:28.583 回答
0

在角度，我们使用：

  var windowEl = angular.element($window);
  scrolldist = windowEl.scrollTop();
于 2016-08-17T03:21:15.483 回答