Javascript fait défiler IntoView uniquement dans la fenêtre d'affichage

Question

J'ai fait une maquette (notez qu'elle utilise un espacement car elle défile jusqu'à une nouvelle ligne de texte pendant la lecture de la vidéo). J'utilise scrollIntoView avec le bloc : 'le plus proche'.

Le problème est que, puisque la page entière défile, elle fait toujours défiler la page. Je veux juste qu'il défile jusqu'à la ligne de texte active dans les lignes div (il n'est pas nécessaire qu'elle soit visible). Parce que si je regarde le div "vidéo", il continue de défiler vers le bas (ce qui est un comportement indésirable).

var text = document.querySelector('.text')


setInterval(function() {
  text.scrollIntoView({
    behavior: 'smooth',
    block: 'nearest'
  });

}, 3000)

.a {
  height: 200px;
}

.elem {
  position: relative;
}

.video {
  width: 200px;
  height: 400px;
  background: #ccc;
  margin-bottom: 100px;
}

.lines {
  overflow-y: auto;
  height:120px;
}

<div class="a"></div>


<div class="elem">
  <div class="video"></div>


  <div class="lines">
    <div>lorem ipsum dolir sit amet</div>
    <div>Vestibulum nulla justo</div>
    <div>Fusce egestas, est ut fringilla facilisis</div>
    <div>Maecenas eu erat condimentum </div>
    <div>Quisque risus</div>
    <div>fames ac turpis egestas</div>
    <div>lorem ipsum dolir sit amet</div>
    <div>Vestibulum nulla justo</div>
    <div class="text">Fusce egestas, est ut fringilla facilisis</div>
    <div>Maecenas eu erat condimentum </div>
    <div>Quisque risus</div>
    <div>fames ac turpis egestas</div>

  </div>


</div>

<div class="a"></div>

Answer 1

Comme vous l'avez découvert, scrollIntoView() ne convient pas à ce que vous essayez de faire ici - il fait défiler de manière agressive plusieurs volets d'affichage pour tenter d'afficher votre élément. < /p>

Un plus approprié est element.scrollTo(..) （在本例中为 .lines sur l'élément parent). Vous devrez faire quelques calculs arithmétiques de haut niveau pour centrer l'élément dans la fenêtre, mais c'est relativement simple :

var text = document.querySelector('.text')

setInterval(function() {
  const parent       = text.parentElement;
  const parentHeight = parent.clientHeight;
  
  const textTop      = text.offsetTop - parent.offsetTop;
  const textMiddle   = textTop + text.offsetHeight / 2;

  parent.scrollTo({ top: textMiddle - parentHeight / 2, behavior: "smooth" });
}, 3000)

.a {
  height: 200px;
}

.elem {
  position: relative;
}

.video {
  width: 200px;
  height: 400px;
  background: #ccc;
  margin-bottom: 100px;
}

.lines {
  overflow-y: auto;
  height:120px;
}

.text {
  background: yellow;
}

<div class="a"></div>


<div class="elem">
  <div class="video"></div>


  <div class="lines">
    <div>lorem ipsum dolir sit amet</div>
    <div>Vestibulum nulla justo</div>
    <div>Fusce egestas, est ut fringilla facilisis</div>
    <div>Maecenas eu erat condimentum </div>
    <div>Quisque risus</div>
    <div>fames ac turpis egestas</div>
    <div>lorem ipsum dolir sit amet</div>
    <div>Vestibulum nulla justo</div>
    <div class="text">Fusce egestas, est ut fringilla facilisis</div>
    <div>Maecenas eu erat condimentum </div>
    <div>Quisque risus</div>
    <div>fames ac turpis egestas</div>

  </div>


</div>

<div class="a"></div>