JavaScript scrollt nur im Ansichtsfenster in die Ansicht

Question

Ich habe ein Modell erstellt (beachten Sie, dass es Abstände verwendet, da beim Abspielen des Videos zu einer neuen Textzeile gescrollt wird). Ich verwende scrollIntoView mit Block: 'nearest'.

Das Problem besteht darin, dass die Seite immer noch gescrollt wird, da die gesamte Seite scrollbar ist. Ich möchte nur, dass es zur aktiven Textzeile im Zeilen-Div scrollt (es muss nicht sichtbar sein). Denn wenn ich mir das Div „Video“ anschaue, scrollt es weiter nach unten (was ein unerwünschtes Verhalten ist).

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

正如您所发现的，scrollIntoView() 不适合您在此处尝试执行的操作 - 它会积极滚动多个视图窗格以尝试将您的元素放入视图中。

更合适的是父元素上的 element.scrollTo(..) （在本例中为 .lines）。您需要进行一些高度算术以使元素在视口中居中，但这相对简单：

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>