Sprawdź, czy element HTML ma paski przewijania

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ć overflowustawienia stylu, ale jak to zrobić w różnych przeglądarkach?

Dodatkowa edycja

Nie tylko overflowustawienia 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ść), offsetwymiar może być większy niż scrollwymiar, ale element nadal można przewijać. W rzeczywistości musimy odjąć granice od offsetwymiaru, aby uzyskać rzeczywisty przewijalny obszar wyświetlania elementu i porównać go z scrollwymiarem.

Dla przyszłego odniesienia

:scrollableFiltr 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.

Znalazłem to gdzieś kilka tygodni temu. U mnie to zadziałało.

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = div.scrollWidth > div.clientWidth;
var hasVerticalScrollbar = div.scrollHeight > div.clientHeight;

/* you'll get true/false */

Próbować:

W przypadku pionowego paska przewijania

el.scrollHeight> el.clientHeight

Poziomy pasek przewijania

el.scrollWidth> el.clientWidth

Wiem, że to działa przynajmniej dla IE8 i Firefox 3.6+.

Może się to wydawać (lub być) trochę hakerskie, ale możesz przetestować właściwości scrollTopi scrollLeft.

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/

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'));

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

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:

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,
  };
}

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ć:

1. Określa, czy element ma przepełnienie ustawione na auto / scroll (w tym przepełnienieX / Y) przy użyciu stylu obliczonego / kaskadowego / bieżącego.
2. Jeśli element ma przepełnienie ustawione na auto / scroll. Ustal offsetWidth i clientWidth.
3. Jeśli clientWidth jest mniejsza niż offsetWidth - prawe obramowanie (znalezione ponownie przez styl obliczony / kaskadowy / bieżący), to wiesz, że masz pasek przewijania.

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!

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:

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;
};

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

var oh = $('#wrapDiv').get(0).offsetHeight;
var sh = $('#wrapDiv').get(0).scrollHeight;

Wydaje mi się, że daje mi to dokładne porównanie ... do tej pory. Czy ktoś wie, czy to jest uzasadnione?

W przypadku IE11 (Internet Explorer 11) musiałem zmienić logikę na:

// 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;

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

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:

const hasScrollbar = document.body.scrollHeight > window.innerHeight

Ważne jest, aby używać window.innerHeightzamiast tego, document.body.clientHeightponieważ w niektórych przeglądarkach mobilnych clientHeight nie otrzyma rozmiaru paska adresu, ale scrollHeight tak, więc otrzymasz nieprawidłowe obliczenia.

żadna z tych odpowiedzi nie jest poprawna. musisz tego użyć:

var div = document.getElementById('container_div_id');

var hasHorizontalScrollbar = (div.offsetWidth > div.clientWidth);
var hasVerticalScrollbar = (div.offsetHeight > div.clientHeight);

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ć:

function getCSS(_elem, _style)
{
    var computedStyle;
    if (typeof _elem.currentStyle != 'undefined')
        computedStyle = _elem.currentStyle;
    else
        computedStyle = document.defaultView.getComputedStyle(_elem, null);
    return computedStyle[_style];
}