Ne scrollIntoView de travail dans tous les navigateurs?

Question

Ne scrollIntoView de travail dans tous les navigateurs? Si non est-il un jQuery alternative?

Answer 1

Il est pris en charge oui, mais l'expérience utilisateur est... mauvais.

@9bits souligné, cela a longtemps été soutenue par tous les principaux navigateurs. Ne vous inquiétez pas à ce sujet. Le principal problème est la façon dont il fonctionne. Simplement sauts sur un élément particulier, qui peut être à la fin de la page. En sautant, les utilisateurs n'ont aucune idée de savoir si:

• la page a été défiler vers le haut
• page défile vers le bas
• ils ont été redirigés elsewehere

Les deux premiers peuvent être déterminés par la position de défilement, mais qui a dit que les utilisateurs gardé la trace de la position de défilement avant le saut a été fait? C'est donc un non déterministe de l'action.

Le dernier est peut-être vrai en particulier si la page a déplacement de l'en-tête qui défile hors de la vue et du reste de la conception de page ne veut pas dire quoi que ce soit sur d'être sur la même page (si elle aussi n'a pas toute la hauteur totale d'élément verticaux comme la barre de menu à gauche). Vous seriez surpris de voir combien de pages ont ce problème. il suffit de vérifier par vous-même. Aller à une certaine page, regarder en haut, puis appuyez sur la Fin de la clé et de le regarder de nouveau. Il est probable que vous penserez que c'est une page différente.

Animé scrollintoview plugin jQuery à la rescousse

C'est pourquoi il existe des plugins qui effectuent de défilement en vue au lieu d'utiliser natif fonction DOM. Généralement, ils animent le défilement, ce qui élimine tous les 3 questions décrites ci-dessus. Les utilisateurs peuvent facilement suivre le mouvement.

Answer 2

Regarde comme il le fait: http://www.quirksmode.org/dom/w3c_cssom.html

Answer 3

J'utilise Matteo Spinnelli de iScroll-4 et il fonctionne sous iOS safari. Il dispose de trois méthodes de scrollTo, scrollToElement et scrollToPage. Disons que vous avez une liste non ordonnée d'éléments enveloppé à l'intérieur d'un div. Comme Robert Koritnik a écrit ci-dessus, vous avez besoin d'avoir cette légère animation pour montrer que vous avez défiler. La méthode ci-dessous permet d'atteindre que effet.

scrollToElement(element, time);