¿ScrollIntoView funciona en todos los navegadores?

Respuestas:

81

Es compatible, sí, pero la experiencia del usuario es ... mala.

Como señaló @ 9bits, desde hace mucho tiempo todos los navegadores principales lo admiten . No te preocupes por eso. El principal problema es la forma en que funciona. Simplemente salta a un elemento en particular que también puede estar al final de la página. Al saltar a él, los usuarios no tienen idea de si:

  • la página se ha desplazado hacia arriba
  • la página se ha desplazado hacia abajo
  • han sido redirigidos a otro lugar

Los dos primeros se pueden determinar por la posición de desplazamiento, pero ¿quién dice que los usuarios mantuvieron un registro de la posición de desplazamiento antes de realizar el salto? Entonces es una acción no determinista.

El último puede ser cierto, especialmente si la página tiene un encabezado en movimiento que se desplaza fuera de la vista y el diseño de la página restante no implica nada al estar en la misma página (si tampoco tiene ningún elemento vertical de altura total como el menú izquierdo bar). Te sorprendería saber cuántas páginas tienen este problema. solo compruébalos tú mismo. Ve a alguna página, mírala en la parte superior, luego presiona la Endtecla y mírala nuevamente. Es probable que piense que es una página diferente.

Complemento de scrollintoviewjQuery animado al rescate

Es por eso que todavía hay complementos que realizan el desplazamiento a la vista en lugar de usar la función DOM nativa. Por lo general, animan el desplazamiento, lo que elimina los 3 problemas descritos anteriormente. Los usuarios pueden realizar un seguimiento del movimiento fácilmente.

Robert Koritnik
fuente
1
Nota: El complemento jQuery no funciona (derecha) si el elemento desplazado está en un iframe (por razones obvias). element.scrollIntoView funciona incluso entonces.
panzi
7
la nueva especificación con ScrollIntoViewOptionspermite especificar behavior: 'smooth'. desafortunadamente, no hay forma de detectar fácilmente si esta opción es compatible con un navegador…
ovejas voladoras
6
Firefox parece ser compatible behavior: "smooth", pero no Chrome ni Safari.
Flimm
1
Es útil para cosas como crear un menú desplegable personalizado donde las teclas de flecha controlan hacia arriba / abajo y, según el elemento seleccionado, el menú se desplaza. En ese caso, sería una mala experiencia para el usuario que no saltara instantáneamente entre elementos.
user2867288
1
@Flimm tampoco en IE / Edge. Consulte la referencia , solo FF36 + tiene esta característica. Por lo tanto, es inútil, lamentablemente.
Alex Zhukovskiy
3

Utilizo iScroll-4 de Matteo Spinnelli y también funciona en iOS Safari. Tiene tres métodos scrollTo, scrollToElement y scrollToPage. Digamos que tiene una lista desordenada de elementos dentro de un div. Como ha escrito Robert Koritnik anteriormente, debe tener esa pequeña animación para mostrar que se ha desplazado. El siguiente método logra ese efecto.

scrollToElement(element, time);
graciasoru
fuente
2
su enlace a iScroll-4 está muerto
Romain Vincent
1

No he intentado esto, pero parece que llevar a cuestas la función scrollIntoView incorporada ahorraría mucho código. Esto es lo que haría si quisiera acción animada:

  1. Almacene la posición de desplazamiento actual del contenedor como POSICIÓN DE INICIO
  2. ejecutar construido en scrollIntoView
  3. Almacene en caché la posición de desplazamiento nuevamente como la POSICIÓN FINAL
  4. Devuelva el contenedor a la POSICIÓN DE INICIO
  5. Animar el desplazamiento a POSICIÓN FINAL
Lex
fuente
1

lea por favor acerca de scrollIntoViewIfNeeded 

if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}
zloctb
fuente
0

Puede usar la alternativa de jQuery y animate <html>y <body>elementos:

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