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

Ответ 1

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

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

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

/* you'll get true/false */

Ответ 2

Try:

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

el.scrollHeight > el.clientHeight

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

el.scrollWidth > el.clientWidth

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

Ответ 3

Это может показаться (или быть) немного хакерским, но вы можете проверить свойства 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

Ответ 4

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

Как отметили несколько человек, просто сравнивать 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,
  };
}

Ответ 5

Возможно, я немного опаздываю на вечеринку, но...

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

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

Вам нужно проверить:

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

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

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

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

Ответ 6

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

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

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

Ответ 7

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

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

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

Ответ 8

Для 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 больше, если присутствует полоса прокрутки.

Ответ 9

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

EDIT: Кажется, вам нужен кросс-браузерный метод, например 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];
}