web-dev-qa-db-fra.com

ScrollIntoView fonctionne-t-il dans tous les navigateurs?

scrollIntoView() fonctionne-t-il dans tous les navigateurs? Sinon, existe-t-il une alternative jQuery?

javascriptjqueryjs-scrollintoview
81
9-bits

Oui, mais l'expérience utilisateur est ... mauvaise.

Comme @ 9bits l'a souligné, cela a longtemps été supporté par tous les principaux navigateurs . Ne vous inquiétez pas pour ça. Le problème principal est la façon dont cela fonctionne. Il saute simplement à un élément particulier qui peut aussi bien se trouver à la fin de la page. En sautant dessus, les utilisateurs ne savent pas si:

  • la page a été déroulée
  • la page a été déroulée
  • ils ont été redirigés ailleurs

Les deux premiers peuvent être déterminés par la position du défilement, mais qui a dit que les utilisateurs gardaient une trace de la position du défilement avant que le saut ne soit effectué? C'est donc une action non déterministe.

Le dernier peut être vrai, en particulier si la page a un en-tête déplacé qui défile et que la conception de la page restante n'implique rien d'être sur la page. même page (si elle n’a pas non plus d’élément vertical de hauteur totale comme la barre de menu de gauche). Vous seriez surpris de voir combien de pages ont ce problème. juste les vérifier vous-même. Allez à une page, regardez en haut, puis appuyez sur End clé et regardez à nouveau. Il est probable que vous pensiez que la page est différente.

Animation scrollintoviewLe plug-in jQuery à la rescousse

C'est pourquoi il y a toujours des plugins qui effectuent un défilement dans la vue au lieu d'utiliser la fonction DOM native. Ils animent généralement le défilement, ce qui élimine les 3 problèmes décrits ci-dessus. Les utilisateurs peuvent facilement suivre le mouvement.

80
Robert Koritnik

On dirait bien que: http://www.quirksmode.org/dom/w3c_cssom.html

13
9-bits

J'utilise iScroll-4 de Matteo Spinnelli et cela fonctionne également dans le safari iOS. Il a trois méthodes scrollTo, scrollToElement et scrollToPage. Supposons que vous ayez une liste non ordonnée d'éléments insérés dans une div. Comme Robert Koritnik l'a écrit ci-dessus, vous devez disposer d'une légère animation pour montrer que vous avez fait défiler. La méthode ci-dessous permet d'obtenir cet effet.

scrollToElement(element, time);
2
thandasoru

lire s'il vous plaît sur scrollIntoViewIfNeeded 

if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}
1
zloctb

Je n'ai pas essayé cela, mais il me semble que le fait de superposer la fonction scrollIntoView intégrée permettrait d'économiser beaucoup de code. Voici ce que je ferais si vous voulez une action animée:

  1. Cache la position de défilement actuelle du conteneur comme START POSITION
  2. exécuter construit dans scrollIntoView
  3. Cache la position de défilement à nouveau comme End Position
  4. Retourner le conteneur à la position de départ
  5. Animez le défilement jusqu'à la position finale
1
Lex

Vous pouvez utiliser les éléments jQuery alternatifs et animés <html> et <body>:

$('html, body').animate({
  scrollTop: $("#myElem").offset().top
}, 1000);
0
S1awek