Document.documentElement.scrollTop значение возврата отличается в Chrome

Я пытаюсь обработать некоторый код, основанный на значении 'document.documentElement.scrollTop. Он возвращает '348' в FF и IE, но в Chrome он возвращает '0'. Нужно ли мне что-либо делать, чтобы преодолеть эту проблему?

FF:

>>> document.documentElement.scrollTop
342

Chrome:

document.documentElement.scrollTop
0

Ответ 1

Стандартный способ получения прокрутки window.scrollY. Это поддерживается браузерами Chrome, Firefox, Opera, Safari и IE Edge или более поздними версиями. Если вы поддерживаете только эти браузеры, вы должны пойти с этим свойством.

IE >= 9 поддерживает аналогичное свойство window.pageYOffset, которое для совместимости возвращает то же самое, что и window.scrollY в последних браузерах, хотя в какой-то момент оно может быть устарело.

Проблема с использованием document.documentElement.scrollTop или document.body.scrollTop заключается в том, что прокрутка не требуется определять ни на одном из них. Chrome и Safari определяют их прокрутку в элементе <body>, пока Firefox определяет его в элементе <html>, возвращенном document.documentElement, например. Это не стандартизировано и может потенциально измениться в будущих версиях браузеров. Однако, если scrollY или pageYOffset отсутствуют, это единственный способ получить свиток.

TL; ДР:

window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0)

Ответ 2

Попробуйте это

window.pageYOffset || document.documentElement.scrollTop

Ответ 3

Вы можете просто использовать следующие коды для исправления этой ошибки!

let scrollHeight = document.body.scrollTop || document.documentElement.scrollTop;
console.log(`scrollHeight = ${scrollHeight}`);


/*

this comment just using for testing the scroll height!

but in this iframe it deon't work at all!

So, you can try it out using Chrome console!

*/

Ответ 4

Используйте window.scrollY, где это возможно, он предназначен для согласования между браузерами. Если вам нужно поддерживать IE, я бы рекомендовал следующее использовать window.scrollY, если он доступен:

typeof window.scrollY === "undefined" ? window.pageYOffset : window.scrollY

window.scrollY будет оцениваться как false, если он возвращает 0, поэтому window.scrollY || window.pageYOffset будет технически проверять window.pageYOffset, когда window.scrollY равно 0, что, очевидно, не является идеальным, если window.pageYOffset не равно 0.

Также обратите внимание, что если вам нужно часто получать значение прокрутки (каждый кадр/каждый прокрутка), как это часто бывает, вы можете проверить, определено ли window.scrollY заранее. Мне нравится использовать эту небольшую вспомогательную функцию, которую я написал, чтобы сделать именно это, наряду с использованием requestAnimationFrame - он должен работать в IE10 и выше.

function registerScrollHandler (callback) {
    "use strict"

    var useLegacyScroll = typeof window.scrollY === "undefined",
        lastX = useLegacyScroll ? window.pageXOffset : window.scrollX,
        lastY = useLegacyScroll ? window.pageYOffset : window.scrollY

    function scrollHandler () {
        // get the values using legacy scroll if we need to
        var thisX = useLegacyScroll ? window.pageXOffset : window.scrollX,
            thisY = useLegacyScroll ? window.pageYOffset : window.scrollY

        // if either the X or Y scroll position changed
        if (thisX !== lastX || thisY !== lastY) {
            callback(thisX, thisY)

            // save the new position
            lastX = thisX
            lastY = thisY
        }

        // check again on the next frame
        window.requestAnimationFrame(scrollHandler)
    }

    scrollHandler()
}

Используйте функцию следующим образом:

registerScrollHandler(function (x, y) {
    /* your code here :) */
    console.log("Scrolled the page", x, y)
})