Bagaimana untuk Mencapai Tatal Segerak Lancar dengan Saiz Elemen Berbeza dalam jQuery?

Tatal Tersegerak dalam jQuery: Cabaran dan Penyelesaian

Keperluan untuk tatal disegerakkan sering timbul apabila bekerja dengan elemen saiz yang berbeza-beza yang memaparkan kandungan yang serupa . Walaupun penyegerakan tatal asas boleh dicapai menggunakan tetapan nilai tatal atas terus, ia menghadapi had apabila elemen mempunyai dimensi yang berbeza.

Penyegerakan Tatal Alamat:

Untuk memastikan penatalan berkadar walaupun saiz elemen yang berbeza, peratusan kandungan yang ditatal perlu dipertimbangkan. Elemen pengiraan.scrollTop / (elemen.scrollHeight - element.offsetHeight) menghasilkan peratusan ini. Mendarab nilai ini dengan elemen lain (element.scrollHeight - element.offsetHeight) memberikan nilai scrollTop yang sepadan.

Mencegah Gelung Infinite dalam Firefox:

Firefox mengalami masalah di mana kod penyegerakan mencipta gelung tak terhingga. Untuk menangani perkara ini, pendengar acara tatal boleh dialih keluar buat sementara waktu sambil menetapkan nilai scrollTop dan kemudian terikat semula.

Pelaksanaan Kod:

Kod berikut melaksanakan penyelesaian :

<code class="javascript">var $divs = $('#div1, #div2');
var sync = function(e){
    var $other = $divs.not(this).off('scroll'), other = $other.get(0);
    var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
    other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
    // Firefox workaround. Rebinding without delay isn't enough.
    setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);</code>

Kod ini bergantung pada pembolehubah $divs, yang harus dilaraskan untuk menyasarkan elemen yang dikehendaki. Ia juga menggabungkan penyelesaian khusus Firefox untuk menghalang isu pendengar.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Tatal Segerak Lancar dengan Saiz Elemen Berbeza dalam jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!