Jaki jest najszybszy sposób sprawdzenia, czy element ma paski przewijania?
Jedną rzeczą jest oczywiście sprawdzenie, czy element jest większy niż jego rzutnia, co można łatwo zrobić, sprawdzając te dwie wartości:
el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth
ale to nie znaczy, że ma również paski przewijania (więc ludzie mogą go przewijać).
Pytanie
Jak mogę sprawdzić, czy paski przewijania w 1 przekroju przeglądarce i 2 tylko javascript (jak w żadnym jQuery ) sposób?
Tylko JavaScript, ponieważ potrzebuję jak najmniejszego narzutu, ponieważ chciałbym napisać bardzo szybki filtr selektora jQuery
// check for specific scrollbars
$(":scrollable(x/y/both)")
// check for ANY scrollbar
$(":scrollable")
Przypuszczam, że musiałbym sprawdzić overflow
ustawienia stylu, ale jak to zrobić w różnych przeglądarkach?
Dodatkowa edycja
Nie tylko overflow
ustawienia stylu. Sprawdzenie, czy element ma pasek przewijania, nie jest tak banalne, jak się wydaje. Pierwsza formuła, którą napisałem powyżej, działa dobrze, gdy element nie ma obramowania, ale jeśli tak jest (zwłaszcza gdy obramowanie ma znaczną szerokość), offset
wymiar może być większy niż scroll
wymiar, ale element nadal można przewijać. W rzeczywistości musimy odjąć granice od offset
wymiaru, aby uzyskać rzeczywisty przewijalny obszar wyświetlania elementu i porównać go z scroll
wymiarem.
Dla przyszłego odniesienia
:scrollable
Filtr selektora jQuery jest zawarty w mojej .scrollintoview()
wtyczce jQuery. Pełny kod można znaleźć w moim wpisie na blogu, jeśli ktoś go potrzebuje. Mimo że nie zapewniło właściwego rozwiązania, kod Soumyi znacznie pomógł mi rozwiązać problem. Wskazał mi właściwy kierunek.
źródło
overflow:hidden
się na to postawi? Zawartość byłaby nadmiarowa, ale nadal nie można jej przewijać. Problem nie jest tak prosty, jak mogłoby się wydawać.div.scrollHeight>div.clientHeight && !(div.style.overflow && div.style.overflow == 'hidden')
)?Próbować:
W przypadku pionowego paska przewijania
Poziomy pasek przewijania
Wiem, że to działa przynajmniej dla IE8 i Firefox 3.6+.
źródło
overflow:hidden
i nie można go już przewijać.overflow:hidden
na sobie ... to nadal jest moim zdaniem poprawna odpowiedź, ponieważ jest najprostsza.Może się to wydawać (lub być) trochę hakerskie, ale możesz przetestować właściwości
scrollTop
iscrollLeft
.Jeśli są większe niż 0, wiesz, że istnieją paski przewijania. Jeśli są 0, ustaw je na 1 i przetestuj je ponownie, aby zobaczyć, czy uzyskasz wynik 1. Następnie ustaw je z powrotem na 0.
Przykład: http://jsfiddle.net/MxpR6/1/
Wydaje mi się, że IE ma inną właściwość, więc za chwilę zaktualizuję to.EDYCJA: Wygląda na to, że IE może obsługiwać tę właściwość. (Nie mogę teraz przetestować IE).
http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx
źródło
offsetHeight
iclientHeight
. Ten ostatni jest zawsze mniejszy o rozmiar paska przewijania, gdy pasek przewijania jest obecny.overflow:scroll
, chcesz, aby był raportowany jako przewijalny, niezależnie od tego, czy paski przewijania są włączone, czy nie. Oczywiście moje rozwiązanie może mieć problemy, jeśli jest dołączone zdarzenie onscroll.Oto jeszcze jedno rozwiązanie:
Jak zauważyło kilka osób, samo porównanie offsetHeight i scrollHeight nie wystarczy, ponieważ różnią się one elementami z ukrytym przepełnieniem itp., Które nadal nie mają pasków przewijania. Więc tutaj sprawdzam również, czy przepełnienie jest przewijane lub automatyczne w obliczonych stylach dla elementu:
źródło
overflow*
jestscroll
, zawsze będzie pasek przewijania, więc myślę, że chceszvertical: overflowY === 'scroll' || overflowY === 'auto' && node.scrollHeight > node.clientHeight
, itp. (Tj. Usuń nawiasy, abyscroll*
vsclient*
był testowany tylko wtedy, gdyoverflow*
jestauto
). W przeciwnym razie wydaje się, że jest to najbardziej poprawne rozwiązanie.Może trochę spóźniam się na imprezę, ale ...
Uważam, że możesz wykryć paski przewijania za pomocą e.offsetWidth i e.clientWidth. Przesunięcie szerokości obejmuje krawędzie i paski przewijania, dopełnienie i szerokość. Szerokość klienta obejmuje wypełnienie i szerokość. Proszę zobaczyć:
https://developer.mozilla.org/en/DOM/element.offsetWidth (drugi obraz) https://developer.mozilla.org/en/DOM/element.clientWidth (drugi obraz)
Musisz sprawdzić:
Zrób to samo dla pionu (offset / clientHeight).
IE7 zgłasza clientHeight 0 dla niektórych elementów (nie sprawdziłem dlaczego), dlatego zawsze potrzebujesz pierwszej kontroli przepełnienia.
Mam nadzieję że to pomoże!
źródło
W przypadku sprawdzania istnienia pasków przewijania występuje kilka problemów, z których jeden polega na tym, że w systemie Mac nie ma żadnego widocznego paska przewijania, więc oba powyższe rozwiązania nie dają dokładnej odpowiedzi.
Ponieważ renderowanie w przeglądarce nie jest zbyt częste, możesz sprawdzić przewijanie, zmieniając scroll, a następnie ustawiając go z powrotem:
źródło
Po prostu bawię się tutaj, ponieważ żadne z powyższych rozwiązań nie zadziałało (do tej pory). Odniosłem pewien sukces, porównując wysokość przewijania Div z jego offsetHeight
Wydaje mi się, że daje mi to dokładne porównanie ... do tej pory. Czy ktoś wie, czy to jest uzasadnione?
źródło
W przypadku IE11 (Internet Explorer 11) musiałem zmienić logikę na:
Dzieje się tak, ponieważ IE raportuje scrollHeight jako 1 większy niż clientHeight, gdy nie ma paska przewijania, ale ok. 9 większy, gdy obecny jest pasek przewijania
źródło
Jeśli chcesz wiedzieć, czy istnieje pasek przewijania dla całej strony i przy pełnej obsłudze przeglądarki , możesz użyć tego:
Ważne jest, aby używać
window.innerHeight
zamiast tego,document.body.clientHeight
ponieważ w niektórych przeglądarkach mobilnych clientHeight nie otrzyma rozmiaru paska adresu, ale scrollHeight tak, więc otrzymasz nieprawidłowe obliczenia.źródło
żadna z tych odpowiedzi nie jest poprawna. musisz tego użyć:
źródło
Dodaj do niego element o 100% szerokości. Następnie ustaw przepełnienie na ukryte. Jeśli styl obliczeniowy elementu (z jQ) ulegnie zmianie, rodzic miał pasek przewijania.
EDYCJA: Wygląda na to, że potrzebujesz metody obsługującej różne przeglądarki, takiej jak getComputedStyle . Próbować:
źródło
$(el).css("overflow/overflowX/overflowY")
i sprawdzić, czy jest ustawiony na auto czy scroll . Ale chciałbym uniknąć używania jQuery.computedStyle = el.currentStyle || document.defaultView.getComputedStyle(el, null);