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
Essaye ça
window.pageYOffset || document.documentElement.scrollTop
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
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
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)
})