web-dev-qa-db-fra.com

Modification de la position de la barre de défilement

Est-il possible de changer la position de la barre de défilement lorsque l'utilisateur atteint un certain point en faisant défiler une page Web? Par exemple, une fois que vous avez atteint la moitié de la page, la barre de défilement revient automatiquement en haut.

javascriptscrollbarposition
23
alan

Vous pouvez calculer le pourcentage de la position actuelle de la barre de défilement à l'aide de l'événement onscroll , et s'il atteint les 50%, la position de défilement peut être définie en haut de la page avec le scrollTo fonction:

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

Vous pouvez vérifier mon exemple ici .

31
CMS

Ouais, je l'ai vu plusieurs fois. Voici du code JS:

window.scrollBy(0,50)

50 est la quantité de pixels que vous souhaitez faire défiler.

12
thedayturns

Les trois fonctions de défilement dont vous voudrez vous préoccuper sont window.scroll(x,y), window.scrollBy(dx,dy) et window.scrollTo(x,y).

Comme David l'a mentionné, vous aurez besoin de la position du défilement pour savoir où vous êtes et utiliser le window.onscroll événement pour lancer ce calcul.

4
Eric Wendelin

(window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop) devrait vous donner la position actuelle du défilement dans à peu près n'importe quel navigateur.

2
David