En una aplicación de reacción, se llama a un método para mostrar un nodo en particular de la siguiente manera.
scrollToQuestionNode(id) { const element = document.getElementById(id); element.scrollIntoView(false); }El desplazamiento funciona bien, pero la acción de desplazamiento es un poco brusca. ¿Cómo puedo hacerlo suave? No veo ninguna opción que pueda dar para scrollIntoView para lo mismo.
Esto podría ayudar.
De la documentación de MDN de scrollIntoView Puede pasar la opción en lugar de booleano.
scrollIntoViewOptions Optional A Boolean or an object with the following options: { behavior: "auto" | "instant" | "smooth", block: "start" | "center" | "end" | "nearest", inline: "start" | "center" | "end" | "nearest", }Así que simplemente puede pasar un parámetro como este.
scrollToQuestionNode(id) { const element = document.getElementById(id); element.scrollIntoView({ block: 'end', behavior: 'smooth' }); }Referencia: https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView
Para compatibilidad con varios navegadores, utilice el polyfill de desplazamiento suave desde aquí
Para una fácil implementación, use un wrapper como este alrededor del polyfill para que el método .js polyfill se inicialice después de la carga:
https://codepen.io/diyifang/embed/MmQyoQ?height=265&theme-id=0&default-tab=js,result&embed-version=2
Ahora esto debería funcionar entre navegadores:
document.querySelector('.foo').scrollIntoView({ behavior: 'smooth' });Use este CSS en el div con la barra de desplazamiento:
.element-with-the-scrollbar { overflow-y: scroll; scroll-behavior: smooth; }Esto proporciona un desplazamiento suave incluso cuando acaba de hacer:
elementWithTheScrollbar.scrollTop = 0;