Apa's cara tercepat untuk memeriksa apakah suatu unsur memiliki scroll bar?
Satu hal yang tentu saja adalah memeriksa apakah elemen lebih besar dari yang diminta, yang dapat dengan mudah dilakukan dengan memeriksa dua nilai:
el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth
tapi itu doesn't berarti bahwa hal itu telah scrollbar juga (jadi itu benar-benar dapat dilihat oleh manusia).
Bagaimana saya memeriksa scrollbar di 1 lintas browser dan 2 javascript (seperti yang di ada jQuery) cara?
Javascript hanya, karena saya perlu kecil overhead mungkin, karena saya'd suka menulis yang sangat cepat jQuery selector filter
// check for specific scrollbars
$(":scrollable(x/y/both)")
// check for ANY scrollbar
$(":scrollable")
Saya kira saya'a harus memeriksa overflow
pengaturan gaya tapi bagaimana saya melakukan itu di cross browser cara?
Tidak hanya overflow
pengaturan gaya. Memeriksa apakah suatu unsur memiliki scrollbar isn't sepele seperti itu tampaknya. Pertama formula I've tertulis di atas bekerja dengan baik ketika elemen doesn't memiliki perbatasan, tetapi ketika hal itu terjadi (terutama ketika perbatasan yang cukup lebar), offset
dimensi dapat lebih besar dari scroll
dimensi tetapi elemen masih bisa digulir. Kami benar-benar harus mengurangi batas dari offset
dimensi untuk mendapatkan yang sebenarnya digulir pandang dari elemen dan bandingkan dengan scroll
dimensi.
:digulir
jQuery selector filter ini termasuk dalam saya .scrollintoview()
plugin jQuery. Kode lengkap dapat ditemukan di blog post jika ada yang perlu. Meskipun tidak't memberikan solusi yang sebenarnya Soumya's kode sangat membantu saya memecahkan masalah. Itu menunjuk saya dalam arah yang benar.
Saya menemukan ini di suatu tempat beberapa minggu yang lalu. Ini bekerja untuk saya.
var div = document.getElementById('container_div_id');
var hasHorizontalScrollbar = div.scrollWidth > div.clientWidth;
var hasVerticalScrollbar = div.scrollHeight > div.clientHeight;
/* you'll get true/false */
Berikut ini adalah solusi lain:
Seperti beberapa orang menunjukkan, hanya membandingkan offsetHeight dan scrollHeight tidak cukup karena mereka berbeda pada unsur-unsur dengan overflow hidden, dll., yang masih don't memiliki scrollbar. Jadi di sini saya'm juga memeriksa jika overflow adalah gulir atau auto on dihitung gaya untuk elemen:
var isScrollable = function(node) {
var overflowY = window.getComputedStyle(node)['overflow-y'];
var overflowX = window.getComputedStyle(node)['overflow-x'];
return {
vertical: (overflowY === 'scroll' || overflowY === 'auto') && node.scrollHeight > node.clientHeight,
horizontal: (overflowX === 'scroll' || overflowX === 'auto') && node.scrollWidth > node.clientWidth,
};
}
Ini mungkin tampak (atau menjadi) sedikit hackish, tapi anda bisa menguji scrollTop
dan scrollLeft
properties.
Jika mereka're lebih besar dari 0, anda tahu ada scrollbar. Jika mereka're 0, kemudian mengatur mereka ke 1, dan menguji mereka lagi untuk melihat apakah anda mendapatkan hasil dari 1. Kemudian mengatur mereka kembali ke 0.
Contoh:
function hasScroll(el, direction) {
direction = (direction === 'vertical') ? 'scrollTop' : 'scrollLeft';
var result = !! el[direction];
if (!result) {
el[direction] = 1;
result = !!el[direction];
el[direction] = 0;
}
return result;
}
alert('vertical? ' + hasScroll(document.body, 'vertical'));
alert('horizontal? ' + hasScroll(document.body, 'horizontal'));
saya percaya ada's sebuah properti yang berbeda untuk IE, jadi saya'll update dalam satu menit dengan itu.
EDIT: Muncul seolah-olah IE dapat mendukung properti ini. (I can't test YAITU sekarang.)
http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx
Saya mungkin sedikit terlambat ke pesta, tapi...
Saya percaya anda dapat mendeteksi untuk scrollbar dengan e.offsetWidth vs. e.clientWidth. Offset lebar termasuk perbatasan dan scrollbars, padding dan lebar. Klien lebar termasuk padding dan lebar. Silakan lihat:
https://developer.mozilla.org/en/DOM/element.offsetWidth (gambar kedua) https://developer.mozilla.org/en/DOM/element.clientWidth (gambar kedua)
Anda perlu memeriksa:
Lakukan hal yang sama untuk vertikal (offset/clientHeight).
IE7 laporan clientHeight 0 untuk beberapa elemen (saya belum't diperiksa mengapa), oleh karena itu anda selalu perlu overflow pertama cek.
Harap ini membantu!
Ada beberapa masalah dalam hal memeriksa keberadaan scrollbar salah satunya adalah bahwa di mac anda don't memiliki terlihat scrollbar jadi baik semua solusi di atas tidak't memberikan jawaban yang akurat.
Jadi karena browser's rendering isn't sangat sering anda dapat memeriksa setelah gulir dengan mengubah gulir dan kemudian menetapkan kembali:
const hasScrollBar = (element) => {
const {scrollTop} = element;
if(scrollTop > 0) {
return true;
}
element.scrollTop += 10;
if(scrollTop === element.scrollTop) {
return false;
}
// undoing the change
element.scrollTop = scrollTop;
return true;
};
Hanya main-main di sini karena tidak ada solusi di atas bekerja untuk saya (sejauh ini). Saya telah menemukan beberapa keberhasilan dengan membandingkan Div's scrollheight terhadap offsetHeight
var oh = $('#wrapDiv').get(0).offsetHeight;
var sh = $('#wrapDiv').get(0).scrollHeight;
Tampaknya untuk memberikan ketepatan perbandingan...sejauh ini. Apakah seseorang yang tahu apakah ini sah?
Untuk IE11 (Internet Explorer 11) saya harus mengubah logika untuk:
// Subtract 3 (a small arbitrary number) to allow for IE reporting a difference of 1 when no scrollbar is present
var hasVerticalScrollbar = div.scrollHeight - 3 > div.clientHeight;
Hal ini karena IE laporan scrollHeight 1 lebih besar dari clientHeight bila tidak ada scrollbar hadir tapi kira-kira 9 lebih besar ketika scrollbar hadir
tak satu pun dari ini jawaban yang benar. anda harus menggunakan ini :
var div = document.getElementById('container_div_id');
var hasHorizontalScrollbar = (div.offsetWidth > div.clientWidth);
var hasVerticalScrollbar = (div.offsetHeight > div.clientHeight);
Tambahkan 100% berbagai elemen di dalamnya. Kemudian mengatur meluap ke tersembunyi. Jika elemen's dihitung gaya (dari jQ) perubahan, orang tua memiliki scrollbar.
EDIT: tampaknya anda ingin cross browser metode seperti getComputedStyle. Coba:
function getCSS(_elem, _style)
{
var computedStyle;
if (typeof _elem.currentStyle != 'undefined')
computedStyle = _elem.currentStyle;
else
computedStyle = document.defaultView.getComputedStyle(_elem, null);
return computedStyle[_style];
}