Bagaimana untuk Mencapai Tatal Tersegerak Lancar Antara Dua DIV dengan jQuery?

Tatal Tersegerak dengan jQuery: Mengatasi Isu Penyegerakan

Untuk mencapai tatal disegerakkan antara dua elemen DIV, adalah penting untuk mengambil kira perbezaan dalam mereka saiz. Kod yang disediakan menetapkan nilai scrollTop secara langsung, yang membawa kepada penyegerakan yang tidak konsisten. Untuk menyelesaikan masalah ini, adalah perlu untuk mengira peratusan kandungan yang ditatal dan melaraskan nilai tatal atas dengan sewajarnya.

Untuk menentukan ketinggian sebenar dan kedudukan tatal semasa, anda boleh menggunakan formula berikut:

percentage = scrollTop / (scrollHeight - offsetHeight)

Pengiraan ini memberikan nilai antara 0 dan 1, mewakili peratusan kandungan yang ditatal. Mendarabkan DIV yang lain (scrollHeight - offsetHeight) dengan nilai ini menghasilkan nilai scrollTop yang sepadan untuk penatalan berkadar.

Selain itu, untuk mengelakkan gelung peristiwa tatal yang tidak terhingga dalam Firefox, anda harus melepaskan sementara pendengar, tetapkan nilai scrollTop, dan kemudian ikat semula pendengar:

$divs.on('scroll', 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);
});

Dengan melaksanakan penambahbaikan ini, anda boleh mencapai penatalan lancar dan disegerakkan antara elemen DIV, walaupun dengan saiz yang berbeza-beza, dan mengelakkan kemungkinan isu gelung tak terhingga dalam Firefox.

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