Что's самый быстрый способ проверки, является ли элемент имеет полосы прокрутки?
Одно конечно это проверка того, что элемент больше, чем область просмотра, которая может легко быть сделано путем проверки этих двух значений:
el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth
но это вовсе'Т означает, что он имеет полосы прокрутки, а (так оно, собственно, можно прокручивать людьми).
Как я могу проверить для прокрутки в 1 кросс-браузер и 2 в JavaScript есть только (как в нет в jQuery) способом?
В JavaScript есть только, потому что мне нужно как малые накладные расходы, насколько это возможно, потому что я'd, как написать очень быстрый jQuery селектор, фильтр
// check for specific scrollbars
$(":scrollable(x/y/both)")
// check for ANY scrollbar
$(":scrollable")
Я предполагаю, что я'd должны проверить переполнения
параметры стиля, но как мне сделать это в кросс-браузер?
Не только переполнения
параметры стиля. Проверка, является ли элемент имеет полосы прокрутки, это'т, как тривиальна, как кажется. Первую формулу я'вэ написано выше прекрасно работает, когда элемент не'т иметь границы, но когда это произойдет (особенно если граница имеет значительную ширину), смещение
размер может быть больше чем свиток
измерение, но элемент все равно можно прокручивать. На самом деле мы должны вычесть границы от "смещение" размера, чтобы получить фактическое прокрутки просмотра элемента и сравните это с прокруткой
измерение.
:фильтр селектор прокручивать
jQuery-это входит в мои .плагин jQuery scrollintoview ()
. Полный код можно найти в моем блоге если кому-то надо. Даже если это не'т предоставить реальное решение Сумии's код значительно помог мне решить проблему. Он указал мне в правильном направлении.
Я нашла это где-то пару недель назад. Он работал для меня.
var div = document.getElementById('container_div_id');
var hasHorizontalScrollbar = div.scrollWidth > div.clientWidth;
var hasVerticalScrollbar = div.scrollHeight > div.clientHeight;
/* you'll get true/false */
Попробуйте:
Для вертикальной полосы прокрутки
Эл.scrollHeight > Эл.clientHeight
Для горизонтальной полосы прокрутки
Эл.scrollWidth > Эл.значения свойств clientwidth
Я знаю, что это работает для IE8 и Firefox 3.6+, по крайней мере.
Вот еще одно решение:
Как несколько человек указали, просто сравнивая 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,
};
}
Это может показаться(или быть)* немного программистские, но вы могли бы проверить scrollTop
и прокрутить
свойства.
Если они'вновь больше, чем 0, вы знаете, есть полосы прокрутки. Если они'ре 0, затем установите их в 1, а тестировать их снова, чтобы увидеть, если вы получите результат на 1. Затем установите их обратно в 0.
Пример:
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, так Я'МР обновления в минутах с этим.</с>
Редактировать: судя по всему, т. е. может поддерживать это свойство. (Я могу't-тест, т. е. прямо сейчас.)
http://msdn.microsoft.com/en-us/library/ms534618(против.85).аспн
Я может немного опоздал на вечеринку, но...
Я верю, что вы можете обнаружить для прокрутки с электронной.offsetWidth и электронной.значения свойств clientwidth. Ширина смещения включает границы и полосы прокрутки, обивка и ширина. Ширина для клиентов включает дополнения и ширина. Пожалуйста, см.:
https://developer.mozilla.org/en/DOM/element.offsetWidth (второе изображение) https://developer.mozilla.org/en/DOM/element.clientWidth (второе изображение)
Вам нужно проверить:
Сделайте то же самое для вертикали (смещение/clientHeight).
ИЕ7 сообщает clientHeight 0 для некоторых элементов (я не'т проверил, почему), поэтому всегда нужно сначала проверка переполнения.
Надеюсь, что это помогает!
Есть несколько проблем в случае проверки на наличие полосы прокрутки, одна из которых заключается в том, что в Mac вы Don'т иметь каких-либо видимых прокрутки, так как все приведенные выше решения не'т дать вам точный ответ.
Так ведь браузер'ы рендеринга это'т очень часто можно проверить, получив свиток с изменением свиток, а затем установить его обратно:
в
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;
};
в
Просто шучу, как ни один из вышеупомянутых решений работал для меня (до сих пор). Я нашел некоторый успех с сравнивать Див'ы scrollheight против его offsetHeight
var oh = $('#wrapDiv').get(0).offsetHeight;
var sh = $('#wrapDiv').get(0).scrollHeight;
Кажется, чтобы дать мне точный сравнении...до сих пор. Кто-нибудь знает, если это законно?
Для ИЕ11 (Интернет Эксплорер 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;
Это потому, что отчеты, т. е. как scrollHeight 1 больше, чем clientHeight, когда нет прокрутки присутствует, но приблизительно 9 больше, когда полоса прокрутки присутствует
ни один из этих ответов являются правильными. вы должны использовать это :
var div = document.getElementById('container_div_id');
var hasHorizontalScrollbar = (div.offsetWidth > div.clientWidth);
var hasVerticalScrollbar = (div.offsetHeight > div.clientHeight);
Добавить 100% широкий элемент внутри него. Затем установить переполнение скрытый. Если элемент'ы вычисленный стиль (от U в) изменения, родитель имеет полосы прокрутки.
Редактировать: похоже, вы хотите, чтобы метод кросс-браузер, как 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];
}