Bagaimana untuk Mengesan Keterlihatan Bar Skrol dalam JavaScript?

Memeriksa Keterlihatan Bar Tatal

Dalam usaha untuk menyesuaikan elemen web secara dinamik kepada panjang kandungan, persoalan timbul: bagaimana kita boleh mengesahkan kehadiran atau ketiadaan bar skrol menegak dalam elemen yang diberikan?

Contoh jQuery yang disediakan menyerlahkan keperluan untuk semakan sedemikian: skrip berusaha untuk membezakan antara elemen dengan kandungan yang banyak, bar skrol yang boleh dilihat dan yang mempunyai kandungan terhad. Berikut ialah penyelesaian yang berkesan:

<code class="js">(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);</code>

Pemalam bergantung pada membandingkan ketinggian tatal elemen (ketinggian kandungan penuh) dan ketinggian yang boleh dilihat. Jika ketinggian skrol melebihi ketinggian yang boleh dilihat, bar skrol mungkin ada.

Penggunaan adalah mudah:

<code class="js">$('#my_div1').hasScrollBar(); // Returns true if vertical scrollbar is visible, false otherwise.</code>

Pendekatan ini telah diuji dan berfungsi merentas versi Firefox, Chrome dan Internet Explorer 6, 7, dan 8. Walau bagaimanapun, ia goyah apabila digunakan pada tag.

Penyelesaian alternatif menggunakan ketinggian pelanggan turut dibentangkan, menangani isu bar skrol menegak yang muncul bersama bar skrol mendatar:

<code class="js">return this.get(0).scrollHeight > this.get(0).clientHeight;</code>

Atas ialah kandungan terperinci Bagaimana untuk Mengesan Keterlihatan Bar Skrol dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!