scrollintoview not div alternative javascript jquery js-scrollintoview

javascript - div - scrollintoview is not a function



¿ScrollIntoView funciona en todos los navegadores? (5)

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

Como señaló @ 9bits, esto siempre ha sido respaldado por todos los principales navegadores . No te preocupes por eso. El problema principal es la forma en que funciona. Simplemente salta a un elemento particular que bien 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 ha sido desplazada hacia abajo
  • han sido redirigidos a otra parte

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

El último puede ser cierto especialmente si la página tiene un encabezado móvil 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 menú izquierdo) bar). Te sorprendería cuántas páginas tienen este problema. solo compruébalo tú mismo. Ve a alguna página, mírala en la parte superior, luego presiona la tecla Finalizar y mírala nuevamente. Es probable que pienses que es una página diferente.

Plugin animado scrollintoview jQuery para el rescate

Es por eso que todavía hay complementos que realizan desplazamiento hacia la vista en lugar de utilizar 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.

¿ scrollIntoView() funciona en todos los navegadores? Si no, ¿hay una alternativa jQuery ?


No he intentado esto, pero parece que usar piggybacking en la función scrollIntoView guardará mucho código. Esto es lo que haría si desea una acción animada:

  1. Posición de desplazamiento actual de caché del contenedor como POSICIÓN DE INICIO
  2. ejecutar integrado en scrollIntoView
  3. Guarde en caché la posición de desplazamiento nuevamente como la POSICIÓN FINAL
  4. Devuelva el contenedor a la POSICIÓN DE INICIO
  5. Desplazamiento animado a la POSICIÓN FINAL


Uso iScroll-4 Matteo Spinnelli y también funciona en iOS safari. Tiene tres métodos scrollTo, scrollToElement y scrollToPage. Digamos que tienes una lista desordenada de elementos envueltos dentro de un div. Como Robert Koritnik ha escrito arriba, necesita tener esa ligera animación para mostrar que se ha desplazado. El siguiente método logra ese efecto.

scrollToElement(element, time);


lea por favor acerca de scrollIntoViewIfNeeded

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