Bagaimana untuk Melaksanakan Tatal Lancar dan Disegerakkan Antara Dua Div dengan jQuery?

Tatal Tersegerak Dibuat Lancar

Melaksanakan tatal disegerakkan antara dua DIV menggunakan jQuery boleh dicapai dengan kod berikut:

$(document).ready(function() {
    $("#div1").scroll(function () {
        $("#div2").scrollTop($("#div1").scrollTop());
    });
    $("#div2").scroll(function () {
        $("#div1").scrollTop($("#div2").scrollTop());
    });
});

Walau bagaimanapun, kod ini menghadapi dua cabaran:

1. Penatalan Tidak Disegerakkan kerana Saiz Div Berbeza

Mengira kedudukan tatal berkadar memerlukan penentuan peratusan kandungan yang ditatal. Ini boleh dicapai menggunakan:

percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);

Mendarab ketinggian div lain dan mengimbangi peratusan ini memastikan penatalan berkadar.

2. Penatalan Tidak Lancar dalam Firefox

Untuk mengelakkan gelung peristiwa tatal yang tidak terhingga dalam Firefox, pertimbangkan untuk menyahikat pendengar buat sementara waktu:

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

Penyelesaian ini melepaskan pendengar sebelum melaraskan scrollTop, mengikatnya semula selepas kelewatan yang singkat dan memastikan penatalan lancar dalam Firefox.

Untuk menunjukkan penyelesaian ini, lihat JSFiddle interaktif: http://jsfiddle.net/b75KZ/5/

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Tatal Lancar dan Disegerakkan Antara Dua Div dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!