Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Tatal ke Elemen Tertentu Di Dalam Div Tatal?

Bagaimana untuk Tatal ke Elemen Tertentu Di Dalam Div Tatal?

Barbara Streisand
Barbara Streisandasal
2024-10-26 18:02:03896semak imbas

How to Scroll to a Specific Element Inside a Scrolling Div?

Cara Mengesan dan Tatal ke Elemen Dalam Div Tatal

Apabila bekerja dengan tatal div, selalunya perlu menatal ke bahagian tertentu elemen dalam div apabila peristiwa berlaku. Walau bagaimanapun, hanya menggunakan fungsi scrollIntoView pada elemen itu sendiri boleh membawa kepada tingkah laku yang tidak dijangka, seperti menatal seluruh halaman.

Untuk menangani isu ini, langkah berikut boleh diambil:

Dapatkan Offset Teratas Elemen Sasaran:

Kira jarak menegak antara bahagian atas elemen sasaran dan bahagian atas bekas div menatal induknya. Nilai ini dikenali sebagai offset atas:

<code class="javascript">var targetElement = document.getElementById('element_within_div');
var topOffset = targetElement.offsetTop;</code>

Tetapkan Kedudukan Tatal Div:

Gunakan sifat tatal Atas bagi div tatal untuk menetapkan tatal kedudukan ke bahagian atas mengimbangi elemen sasaran:

<code class="javascript">document.getElementById('scrolling_div').scrollTop = topOffset;</code>

Ini akan menatal div supaya elemen sasaran berada di bahagian atas atau sedekat mungkin dengan bahagian atas dalam kawasan yang boleh dilihat div.

Sebagai alternatif, jika menggunakan rangka kerja JS Prototaip, kod berikut boleh digunakan:

<code class="javascript">var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];</code>

Dengan mengikuti langkah ini, anda boleh memastikan bahawa div menatal bergerak dengan lancar untuk memaparkan elemen yang ditentukan dalam kandungannya, mengelakkan penatalan halaman yang tidak diingini.

Atas ialah kandungan terperinci Bagaimana untuk Tatal ke Elemen Tertentu Di Dalam Div Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn