Modification de la position Scrollbar
-
12-09-2019 - |
Question
Est-il possible de changer la position de la barre de défilement lorsque l'utilisateur atteint un certain point défilement vers le bas d'une page Web? Par exemple, une fois que vous avez atteint à mi-chemin vers le bas bas de la page la barre de défilement se déplacerait automatiquement vers le haut.
La solution
Vous pouvez calculer le pourcentage de la position actuelle du scrollbar en utilisant le onscroll événement, et si elle atteint 50% la position de défilement peut être réglée en haut de la page avec la fonction de scrollTo:
window.onload = function () {
window.onscroll = function () {
var doc = document.body,
scrollPosition = doc.scrollTop,
pageSize = (doc.scrollHeight - doc.clientHeight),
percentageScrolled = Math.floor((scrollPosition / pageSize) * 100);
if (percentageScrolled >= 50){ // if the percentage is >= 50, scroll to top
window.scrollTo(0,0);
}
};
};
Autres conseils
Eh oui, je l'ai vu plusieurs fois. Voici un code JS:
window.scrollBy(0,50)
50 est la quantité de pixels que vous voulez défiler.
Les trois fonctions de défilement, vous aurez envie de vous préoccuper sont window.scroll(x,y)
, window.scrollBy(dx,dy)
et window.scrollTo(x,y)
.
Comme David dit que vous aurez besoin de la position de défilement pour savoir où vous êtes et utilisez l'événement window.onscroll
pour déclencher ce calcul.
(window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop) doit vous donner la position actuelle du défilement dans à peu près tous les navigateurs.