Mengapa Keseluruhan Halaman Bergerak Apabila Menggunakan ScrollIntoView(true) dalam Senarai Kedudukan Tetap?

ScrollIntoView() dan Pergerakan Halaman Yang Tidak Diingini

Soalan:

Apabila menggunakan ScrollIntoView(true) untuk menatal item ke dalam lihat dalam senarai kedudukan tetap, mengapakah keseluruhan halaman bergerak sedikit?

Konteks:

Senarai kedudukan tetap (#listOfDivs) dimuatkan melalui AJAX dalam Safari pada peranti mudah alih. Menggunakan ScrollIntoView(false) untuk menatal ke bawah berfungsi seperti yang diharapkan, tetapi ScrollIntoView(true) untuk menatal ke atas menyebabkan seluruh halaman bergerak.

Struktur:

#listOfDivs {
  position: fixed;
  top: 100px;
  width: 300px;
  height: 300px;
  overflow-y: scroll;
}

<div>

Jawapan:

Gelagat lalai ScrollIntoView(true) adalah untuk menatal elemen ke paparan dari bahagian atas viewport. Untuk menghalang keseluruhan halaman daripada bergerak, tentukan pilihan tingkah laku sebagai lancar, pilihan blok sebagai terdekat dan pilihan sebaris sebagai permulaan:

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

Dokumentasi:

Rujuk dokumentasi Rangkaian Pembangun Mozilla (MDN) untuk butiran mengenai kaedah ScrollIntoView: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Atas ialah kandungan terperinci Mengapa Keseluruhan Halaman Bergerak Apabila Menggunakan ScrollIntoView(true) dalam Senarai Kedudukan Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!