Bagaimanakah Saya Menentukan Peratusan Tatal Menegak Silang Pelayar dalam JavaScript?

Mary-Kate Olsen
Lepaskan: 2024-10-18 17:15:29
asal
198 orang telah melayarinya

How Do I Determine the Vertical Scroll Percentage Cross-Browser in JavaScript?

Kaedah Penyemak Imbas Merentas untuk Menentukan Peratusan Tatal Menegak dalam JavaScript

Dalam pembangunan web, selalunya menjadi perlu untuk menentukan peratusan menegak bar skrol yang telah dilalui pengguna. Kaedah berikut menyediakan penyelesaian silang penyemak imbas untuk masalah ini.

Pendekatan Berasaskan Fungsi

Menggunakan elemen HTML dan objek dokumen, kita boleh mengira peratusan skrol seperti berikut :

<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>
Salin selepas log masuk

Alternatif jQuery

Bagi mereka yang lebih suka jQuery, pendengar acara boleh digunakan:

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

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

Penghadan

Perhatikan bahawa kaedah ini mungkin tidak dipaparkan dengan tepat 100% pada penyemak imbas mudah alih moden disebabkan oleh fungsi autosembunyikan pada tatal.

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

sumber:php
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!