Bagaimana untuk Mencapai Tatal Segerak Lancar dan Berkadar dalam jQuery: Penyelesaian kepada Isu Lag Firefox?

Dilema Tatal Tersegerak dalam jQuery: Mencapai Tatal Lancar dan Berkadar

Melaksanakan tatal disegerakkan boleh menjadi satu cabaran apabila berhadapan dengan elemen saiz yang berbeza. Untuk menangani perkara ini, anda perlu menentukan peratusan kandungan yang ditatal dan mengira nilai scrollTop yang sepadan untuk elemen lain.

Dalam kes anda, anda boleh menggunakan formula ini: scrollTop / (scrollHeight - offsetHeight). Ini menghasilkan nilai antara 0 dan 1, yang mewakili peratusan elemen yang telah ditatal.

Selain itu, anda boleh menghadapi isu apabila menatal dalam Firefox menjadi lembap. Ini berpunca daripada fakta bahawa kod semasa anda secara tidak sengaja mencipta gelung acara tatal tanpa henti. Menggunakan off() untuk menyahikat pendengar buat sementara waktu, melaraskan scrollTop, dan kemudian mengikatnya semula boleh menyelesaikan masalah ini.

Berikut ialah coretan kod yang dioptimumkan yang menangani kedua-dua isu:

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 is insufficient.
    setTimeout( function(){ $other.on('scroll', sync ); },10);
}

$divs.on( 'scroll', sync);

Kod ini memastikan penatalan berkadar sambil menghalang gelung tak terhingga peristiwa tatal dalam Firefox. Untuk melihat demonstrasi yang berfungsi, lawati jsfiddle ini: http://jsfiddle.net/b75KZ/5/

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Tatal Segerak Lancar dan Berkadar dalam jQuery: Penyelesaian kepada Isu Lag Firefox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!