javascript - react - scrollintoview offset

scrollIntoView desplaza demasiado lejos

Question

Tengo una página donde una barra de desplazamiento que contiene filas de tablas con divs en ellas se genera dinámicamente desde la base de datos. Cada fila de la mesa actúa como un enlace, como el que verías en una lista de reproducción de YouTube junto al reproductor de video.

Cuando un usuario visita la página, se supone que la opción en la que se encuentra está en la parte superior de la división de desplazamiento. Esta funcionalidad está funcionando. El problema es que va demasiado lejos. Al igual que la opción en la que están es aproximadamente 10px demasiado alto. Por lo tanto, se visita la página, se usa la URL para identificar qué opción se seleccionó y luego se desplaza esa opción hasta la parte superior de la división de desplazamiento. Nota: Esta no es la barra de desplazamiento de la ventana, es un div con una barra de desplazamiento.

Estoy usando este código para hacer que mueva la opción seleccionada a la parte superior del div:

var pathArray = window.location.pathname.split( ''/'' );

var el = document.getElementById(pathArray[5]);

el.scrollIntoView(true);

Lo mueve a la parte superior de la div, pero unos 10 píxeles demasiado arriba. Alguien sabe como arreglar eso?

Answer 1

Posición de anclaje por método absoluto

Otra forma de hacerlo es colocar los anclajes exactamente donde desee en la página, en lugar de confiar en el desplazamiento por desplazamiento. Creo que permite un mejor control de cada elemento (por ejemplo, si desea un desplazamiento diferente para ciertos elementos) y también puede ser más resistente a los cambios / diferencias de la API del navegador.

<div id="title-element" style="position: relative;">
  <div id="anchor-name" style={{ position: ''absolute'', top: -100, left: 0 }} />
</div>

Ahora el desplazamiento se especifica como -100 en relación con el elemento. Cree una función para crear este anclaje para la reutilización del código, o si está usando un marco JS moderno como Reaccionar, cree un componente que represente su anclaje y pase el nombre y la alineación del ancla para cada elemento, que puede o puede no sea lo mismo

Luego solo usa:

const element = document.getElementById(''anchor-name'')
element.scrollIntoView({ behavior: ''smooth'', block: ''start'' });

Para un desplazamiento suave con un desplazamiento de 100px.

Answer 2

Puedes hacerlo en dos pasos:

el.scrollIntoView(true);
window.scrollBy(0, -10); // Adjust scrolling with a negative value here

Answer 3

Si se trata de 10px, supongo que simplemente podría ajustar manualmente el desplazamiento de desplazamiento del div que lo contiene así:

el.scrollIntoView(true);
document.getElementById("containingDiv").scrollTop += 10;

Answer 4

Sobre la base de una respuesta anterior, estoy haciendo esto en un proyecto Angular5.

Comenzó con

// el.scrollIntoView(true);
el.scrollIntoView({
   behavior: ''smooth'',
   block: ''start''
});
window.scrollBy(0, -10); 

Pero esto dio algunos problemas y fue necesario configurar el tiempo de espera para el scrollBy () de esta manera:

//window.scrollBy(0,-10);
setTimeout(() => {
  window.scrollBy(0,-10)
  }, 500);

Y funciona perfectamente en MSIE11 y Chrome 68+. No he probado en FF. 500 ms fue el retraso más corto que me atrevería. Bajar a veces fallaba porque el desplazamiento suave aún no se había completado. Ajuste según sea necesario para su propio proyecto.

+1 a por esta solución simple pero efectiva.

Answer 5

Suponiendo que desea desplazarse a los divs que están todos en el mismo nivel en DOM y tienen un nombre de clase "scroll-with-offset", entonces este CSS resolverá el problema:

.scroll-with-offset {    
  padding-top: 100px;
  margin-bottom: -100px;
}

El desplazamiento desde la parte superior de la página es 100px. Solo funcionará como se pretende con el bloque: ''inicio'':

element.scrollIntoView({ behavior: ''smooth'', block: ''start'' });

Lo que está sucediendo es que el punto superior de los divs está en la ubicación normal, pero sus contenidos internos comienzan 100px por debajo de la ubicación normal. Para eso es para padding-top: 100px. margen inferior: -100px es para compensar el margen adicional del div inferior. Para completar la solución, también agregue este CSS para compensar los márgenes / rellenos para los divs más altos y más bajos:

.top-div {
  padding-top: 0;
}
.bottom-div {
  margin-bottom: 0;
}

Answer 6

También puede usar las options element.scrollIntoView()

el.scrollIntoView(
  { 
    behavior: ''smooth'', 
    block: ''start'' 
  },
);

que la mayoría de los navegadores support

Answer 7

Tengo esto y funciona muy bien para mí:

// add a smooth scroll to element
scroll(el) {
el.scrollIntoView({
  behavior: ''smooth'',
  block: ''start''});

setTimeout(() => {
window.scrollBy(0, -40);
}, 500);}

Espero eso ayude.