IE8替代window.scrollY？

Question

我正在尝试确定使用window.scrollY滚动的像素数。但IE8不支持此功能。什么是安全的跨浏览器替代方案？

Answer 1

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

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

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

Here, try out the example for yourself!

Answer 2

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

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

Answer 3

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

Answer 4

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

Mootools is open source，你可以“窃取”它的实现，相关的片段：

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用于真正古老的错误浏览器。

Answer 5

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

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

Answer 6

基于Mozilla，以及上面的答案，我创建了下面的函数，以便更容易获得coords：

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所述，如上所述，the 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），XP上的IE8

Answer 7

在角度，我们使用：

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

Answer 8

window.scrollY＆window.scrollX适用于所有现代浏览器（Chrome，FireFox和Safari），但在IE中不起作用，以便修复使用window.pageXOffset或window.pageYOffset。

下面是我编写的用于修复问题的示例代码，以便程序化滚动适用于包括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
}