Bagaimana untuk Tatal ke Elemen Dalam Div Terbatas dalam JavaScript?

Menatal ke Elemen Dalam Div Terhad

Dalam pembangunan web, menatal dalam elemen pada halaman boleh menjadi penting untuk pengalaman pengguna. Satu isu biasa yang dihadapi oleh pembangun ialah menatal ke elemen dalam div yang ditatal.

Masalah:

Seorang pengguna mahu mengklik pada elemen dalam div yang ditatal dan mendapatkannya secara automatik tatal untuk melihat. Walau bagaimanapun, menggunakan kaedah JavaScript berikut:

document.getElementById(chr).scrollIntoView(true);

Hasil dalam keseluruhan halaman ditatal, termasuk div itu sendiri. Tingkah laku ini tidak diingini.

Penyelesaian:

Untuk menatal div sahaja untuk melihat elemen sasaran, anda perlu mengira offset atas elemen berbanding elemen sasarannya. induk (bekas div yang ditatal).

var myElement = document.getElementById('element_within_div');
var topPos = myElement.offsetTop;

Pos atas pembolehubah kini mengandungi jarak antara bahagian atas div yang menatal dan elemen sasaran.

Untuk menatal div ke kedudukan itu, gunakan scrollTop:

document.getElementById('scrolling_div').scrollTop = topPos;

Rangka Kerja Prototaip:

Jika menggunakan rangka kerja Prototaip JS, anda boleh menggunakan kod berikut:

var posArray = $('element_within_div').positionedOffset();
$('scrolling_div').scrollTop = posArray[1];

Kaedah ini akan menatal div supaya elemen sasaran betul-betul berada di bahagian atas, atau menatal sejauh mungkin ke bawah untuk kelihatan dalam div.

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