Bagaimana untuk Menentukan Peratusan Tatal Menegak dalam JavaScript Merentasi Pelayar Berbeza?

Menentukan Peratusan Tatal Menegak dalam JavaScript: Pendekatan Merentas Pelayar

Keupayaan untuk menentukan peratusan tatal menegak pengguna adalah penting untuk melaksanakan tatal -ciri bergantung dalam aplikasi web. Panduan komprehensif ini menyediakan penyelesaian silang penyemak imbas untuk mengira dengan tepat peratusan yang ditatal.

Penyelesaian Bukan Rangka Kerja

Untuk penyemak imbas seperti Chrome, Firefox dan IE9 , formula berikut boleh digunakan untuk mengira peratusan skrol:

<code class="javascript">var percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;</code>

di mana:

• h ialah elemen akar dokumen
• b ialah elemen badan dokumen
• st ialah sama ada 'scrollTop' (untuk penyemak imbas WebKit) atau 'scrollTop' (untuk penyemak imbas lain)
• sh sama ada 'scrollHeight' (untuk pelayar WebKit) atau 'scrollHeight' (untuk penyemak imbas lain )

Pelaksanaan Fungsi

Anda boleh merangkum formula ini ke dalam fungsi untuk kebolehgunaan semula:

<code class="javascript">function getScrollPercent() {
    var h = document.documentElement, 
        b = document.body,
        st = 'scrollTop',
        sh = 'scrollHeight';
    return (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
}</code>

JQuery Solution

Jika anda menggunakan jQuery, coretan kod berikut menyediakan penyelesaian silang penyemak imbas untuk mengira peratusan skrol:

<code class="javascript">$(window).on('scroll', function(){
  var s = $(window).scrollTop(),
      d = $(document).height(),
      c = $(window).height();

  var scrollPercent = (s / (d - c)) * 100;
  
  console.clear();
  console.log(scrollPercent);
})</code>

Nota

• Untuk penyemak imbas mudah alih moden, penyelesaian mungkin tidak mencapai 100% disebabkan oleh kelakuan autosembunyikan pada tatal UI penyemak imbas.
• Penyelesaian jQuery adalah berdasarkan jawapan asal yang diberikan.

Atas ialah kandungan terperinci Bagaimana untuk Menentukan Peratusan Tatal Menegak dalam JavaScript Merentasi Pelayar Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!