web-dev-qa-db-fra.com

la valeur de retour document.documentElement.scrollTop diffère dans Chrome

J'essaie de traiter du code basé sur la valeur 'document.documentElement.scrollTop'. Il renvoie "348" dans FF et IE, mais dans Chrome, il renvoie "0". Dois-je faire quelque chose pour surmonter ce problème?

FF:

>>> document.documentElement.scrollTop
342

Chrome:

document.documentElement.scrollTop
0
javascriptjquerygoogle-chrome
21
RGR

Essaye ça

window.pageYOffset || document.documentElement.scrollTop
16
Nick Salloum

Vous pouvez utiliser cette fonction document.body.getBoundingClientRect() et il retourne cet objet {x: 0, y: 0, width: 1903, height: 2691.5625, top: 0, …}; dans cet objet, vous pouvez accéder au corps top document.body.getBoundingClientRect().top 

1
saffet menteşe

Vous pouvez simplement utiliser les codes suivants pour corriger ce bogue!

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!

*/

document.body.scrollTop;
// Pour Chrome, Safari et Opera
document.documentElement.scrollTop;
// Firefox et IE placent le débordement au niveau, sauf indication contraire.
Par conséquent, nous utilisons la propriété documentElement pour ces deux navigateurs.

liens de référence:
http://www.w3schools.com/jsref/prop_element_scrolltop.asp

https://drafts.csswg.org/cssom-view/#dom-element-scrolltop

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

1
xgqfrms

Utilisez window.scrollY dans la mesure du possible, il est conçu pour être cohérent d’un navigateur à l’autre. Si vous avez besoin de supporter IE, alors je vous recommande d'utiliser uniquement window.scrollY s'il est disponible:

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

window.scrollY sera évalué comme faux s'il renvoie 0. Si window.scrollY || window.pageYOffset vérifiait techniquement window.pageYOffset chaque fois que window.scrollY était égal à 0, ce qui n'est évidemment pas idéal si window.pageYOffset n'est pas égal à 0.

Notez également que si vous devez obtenir la valeur de défilement fréquemment (chaque image/chaque défilement), comme cela est souvent le cas, vous pouvez vérifier si window.scrollY est défini au préalable. J'aime utiliser cette petite fonction d'aide que j'ai écrite pour faire exactement cela, ainsi que pour utiliser requestAnimationFrame - cela devrait fonctionner dans IE10 et les versions ultérieures.

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()
}

Utilisez la fonction comme ceci:

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