Tatal Javascript IntoView hanya apabila dalam viewport

Question

Saya membuat mockup (perhatikan bahawa ia menggunakan jarak kerana ia menatal ke baris teks baharu semasa video dimainkan). Saya menggunakan scrollIntoView dengan blok: 'terdekat'.

Masalahnya, memandangkan seluruh halaman telah menatal, ia masih menatal halaman tersebut. Saya hanya mahu ia menatal ke baris teks aktif dalam baris div (ia tidak perlu dilihat). Kerana jika saya melihat div "video", ia terus menatal ke bawah (yang merupakan tingkah laku yang tidak diingini).

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

Seperti yang anda temui, scrollIntoView() tidak sesuai untuk perkara yang anda cuba lakukan di sini - ia menatal berbilang anak tetingkap paparan secara agresif dalam usaha untuk memaparkan elemen anda.

Yang lebih sesuai ialah element.scrollTo(..) （在本例中为 .lines pada elemen induk). Anda perlu melakukan beberapa aritmetik peringkat tinggi untuk memusatkan elemen dalam port pandangan, tetapi ia agak mudah:

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>