Проверьте, есть ли у HTML-элемента полосы прокрутки

Какой самый быстрый способ проверить, есть ли у элемента полосы прокрутки?

Одна вещь, конечно же, - это проверить, больше ли элемент, чем его область просмотра, что можно легко сделать, проверив эти два значения:

el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth

но это не значит, что у него также есть полосы прокрутки (так что люди могут его прокручивать).

Вопрос

Как я могу проверить для скроллинга в 1 кросс - браузер и 2 Javascript только (как не JQuery ) способом?

Только Javascript, потому что мне нужно как можно меньше накладных расходов, потому что я хотел бы написать очень быстрый фильтр селектора jQuery

// check for specific scrollbars
$(":scrollable(x/y/both)")

// check for ANY scrollbar
$(":scrollable")

Полагаю, мне придется проверить overflowнастройки стиля, но как мне это сделать в кросс-браузере?

Дополнительное редактирование

Не только overflowнастройки стиля. Проверить, есть ли у элемента полоса прокрутки, не так тривиально, как кажется. Первая формула, которую я написал выше, отлично работает, когда элемент не имеет границы, но когда она есть (особенно когда граница имеет значительную ширину), offsetразмер может быть больше scrollразмера, но элемент все еще можно прокручивать. На самом деле нам нужно вычесть границы из offsetизмерения, чтобы получить фактическое прокручиваемое окно просмотра элемента и сравнить его с scrollразмером.

Для дальнейшего использования

:scrollableФильтр селектора jQuery включен в мой .scrollintoview()плагин jQuery. Полный код можно найти в моем блоге, если он кому-нибудь понадобится. Несмотря на то, что он не предлагал фактического решения, код Soumya значительно помог мне решить проблему. Это указывало мне в правильном направлении.

Я нашел это где-то пару недель назад. У меня это сработало.

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

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

/* you'll get true/false */

Пытаться:

Для вертикальной полосы прокрутки

el.scrollHeight> el.clientHeight

Для горизонтальной полосы прокрутки

el.scrollWidth> el.clientWidth

Я знаю, что это работает как минимум для IE8 и Firefox 3.6+.

Это может показаться (или быть) немного хака, но вы можете протестировать scrollTopи scrollLeftсвойство.

Если они больше 0, вы знаете, что есть полосы прокрутки. Если они равны 0, установите их в 1 и проверьте их снова, чтобы увидеть, получите ли вы результат 1. Затем установите их обратно в 0.

Пример: 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'));

Я считаю, что для IE есть другое свойство, поэтому я обновлю его через минуту.

EDIT: похоже, что IE может поддерживать это свойство. (Я не могу сейчас протестировать IE.)

http://msdn.microsoft.com/en-us/library/ms534618(VS.85).aspx

Вот еще одно решение:

Как отметили некоторые люди, простого сравнения offsetHeight и scrollHeight недостаточно, поскольку они различаются по элементам со скрытым переполнением и т. Д., У которых все еще нет полос прокрутки. Итак, здесь я также проверяю, является ли переполнение прокручиваемым или автоматическим для вычисленных стилей для элемента:

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

Я, может быть, немного опоздал на вечеринку, но ...

Я считаю, что вы можете обнаружить полосы прокрутки с помощью e.offsetWidth против e.clientWidth. Ширина смещения включает границы и полосы прокрутки, отступы и ширину. Ширина клиента включает отступы и ширину. Посмотри пожалуйста:

https://developer.mozilla.org/en/DOM/element.offsetWidth (второе изображение) https://developer.mozilla.org/en/DOM/element.clientWidth (второе изображение)

Вам необходимо проверить:

1. Установлено ли для элемента переполнение автоматически / прокрутка (включая переполнение X / Y) с использованием вычисленного / каскадного / текущего стиля.
2. Если для элемента задано автоматическое переполнение / прокрутка. Установите offsetWidth и clientWidth.
3. Если clientWidth меньше, чем offsetWidth - правая граница (снова найденная с помощью вычисляемого / каскадного / текущего стиля), то вы знаете, что у вас есть полоса прокрутки.

Сделайте то же самое для вертикали (offset / clientHeight).

IE7 сообщает, что clientHeight равен 0 для некоторых элементов (я не проверял почему), поэтому вам всегда нужна первая проверка переполнения.

Надеюсь это поможет!

В случае проверки наличия полос прокрутки возникает несколько проблем, одна из которых заключается в том, что в Mac у вас нет видимой полосы прокрутки, поэтому оба приведенных выше решения не дадут вам точного ответа.

Так как рендеринг браузера происходит не очень часто, вы можете проверить наличие прокрутки с изменением прокрутки, а затем вернуть ее:

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

Просто возиться здесь, поскольку ни одно из вышеперечисленных решений для меня не сработало (пока). Я нашел некоторый успех при сравнении высоты прокрутки Div с его offsetHeight

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

Кажется, это дает мне точное сравнение ... пока что. Кто-нибудь знает, законно ли это?

Для IE11 (Internet Explorer 11) мне пришлось изменить логику на:

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

Это связано с тем, что IE сообщает scrollHeight на 1 больше, чем clientHeight, когда полоса прокрутки отсутствует, но примерно на 9 больше, когда полоса прокрутки присутствует.

Если вам нужно знать, присутствует ли полоса прокрутки для всей веб-страницы и с полной поддержкой браузера, вы можете использовать это:

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

Это важно использовать window.innerHeightвместо, document.body.clientHeightпотому что в некоторых мобильных браузерах clientHeight не получает размер адресной строки, а scrollHeight будет, поэтому вы получите неправильные вычисления.

ни один из этих ответов не является правильным. вы должны использовать это:

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

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

Добавьте внутрь элемент шириной 100%. Затем установите значение переполнения как скрытое. Если вычисленный стиль элемента (из jQ) изменяется, у родительского элемента была полоса прокрутки.

РЕДАКТИРОВАТЬ: Кажется, вам нужен кроссбраузерный метод, например getComputedStyle . Пытаться:

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