Я пытаюсь определить, сколько пикселей я прокрутил, используя window.scrollY
. Но это не поддерживается в IE8. Что такое безопасная альтернатива кросс-браузера?
IE8 альтернатива window.scrollY?
Ответ 1
Совместимая с браузером версия для window.scrollY
- document.documentElement.scrollTop
. Подробнее о подробном обходном пути в IE8 и ранее см. Раздел "Примечания" этого фрагмента документации Mozilla.
Как уже упоминалось здесь, еще одна альтернатива window.scrollY(обратите внимание, что это только совместимость с IE9 +).
В отношении ссылки выше, проверьте Пример 4 для полностью совместимого способа получения положения прокрутки (он даже учитывает увеличение по мере того, как упоминается @adeneo!) с помощью document.documentElement.scrollTop
и document.documentElement.scrollLeft
,
Ответ 2
Если вам не нужно многому использовать, просто выполните:
var scroll =
window.scrollY //Modern Way (Chrome, Firefox)
|| window.pageYOffset (Modern IE, including IE11
|| document.documentElement.scrollTop (Old IE, 6,7,8)
Ответ 3
Если вы используете jQuery, я использовал $(window).scrollTop(), чтобы получить позицию Y в IE 8. Казалось, что это работает.
Ответ 4
Если у вас есть веская причина не просто использовать библиотеку для обработки такой базовой функциональности, не стесняйтесь "не изобретать колесо".
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;
}
Эти 2 являются основой для определения того, какой режим совместимости у вашего текущего браузера есть, а затем использовать window.pageYOffset
или document.body.scrollTop
на основе этого или даже document.html.scrollTop
для действительно старых багги-браузеров.
Ответ 5
Основываясь на ответе Нильса, я придумываю немного более компактное решение, когда нужна только координата Y:
function get_scroll_y() {
return window.pageYOffset || document.body.scrollTop || document.html.scrollTop;
}
Ответ 6
На основе 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, как указано в приведенных выше сроках жизни, свойство 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), IE8 на XP
Ответ 7
В angular мы используем:
var windowEl = angular.element($window);
scrolldist = windowEl.scrollTop();