web-dev-qa-db-fra.com

comment rendre javascript scrollIntoView lisse?

Dans une application de réaction, une méthode est appelée pour faire apparaître un nœud particulier comme suit.

scrollToQuestionNode(id) {
        const element = document.getElementById(id);
        element.scrollIntoView(false);
}

Le défilement se passe bien, mais l'action de défilement est un peu saccadée. Comment puis-je le rendre lisse? Je ne vois aucune option que je puisse donner à scrollIntoView pour la même chose.

javascriptcssreactjsscroll
27
Sahil Sharma

Cela pourrait aider.

De la documentation MDN de scrollIntoView Vous pouvez passer option au lieu de booléen.

scrollIntoViewOptions Optional
A Boolean or an object with the following options:
{
  behavior: "auto"  | "instant" | "smooth",
  block:    "start" | "end",
}

Donc, vous pouvez simplement passer un paramètre comme celui-ci.

scrollToQuestionNode(id) {
  const element = document.getElementById(id);
  element.scrollIntoView({ block: 'end',  behavior: 'smooth' });
}

Référence: https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView

60
lavish

Pour le support multibrowser, utilisez le smoots scroll polyfill à partir d'ici:

https://github.com/iamdustan/smoothscroll

Pour une implémentation facile, utilisez un wrapper comme celui-ci autour du polyfill afin que la méthode .js polyfill soit initialisée après le chargement:

https://codepen.io/diyifang/embed/MmQyoQ?height=265&theme-id=0&default-tab=js,result&embed-version=2

Maintenant, cela devrait fonctionner avec plusieurs navigateurs:

document.querySelector('.foo').scrollIntoView({
  behavior: 'smooth'
});
0
metamagikum