Можно ли проверить overflow:auto
div?
Например:
HTML
<div id="my_div" style="width: 100px; height:100px; overflow:auto;" class="my_class">
* content
</div>
Jquery
$('.my_class').live('hover', function (event)
{
if (event.type == 'mouseenter')
{
if( ... if scrollbar visible ? ... )
{
alert('true'):
}
else
{
alert('false'):
}
}
});
Иногда содержимое короткое (без полосы прокрутки), а иногда длинное (видимая полоса прокрутки).
> this.innerHeight();
jsfiddle.net/p3FFL/210Может быть, более простое решение.
источник
.ready()
Вы можете сделать это , используя комбинацию из
Element.scrollHeight
иElement.clientHeight
атрибутов.Согласно MDN:
И:
Следовательно, элемент будет отображать полосу прокрутки, если высота прокрутки больше высоты клиента, поэтому ответ на ваш вопрос:
источник
Я должен немного изменить то, что сказал Рейгель:
innerHeight считает высоту элемента управления и его верхнюю и нижнюю отступы
источник
Это расширяет ответ @ Рейгеля. Он вернет ответ для горизонтальной или вертикальной полосы прокрутки.
Пример:
источник
Вам нужен element.scrollHeight . Сравните это с
$(element).height()
.источник
Я создал новый пользовательский псевдо-селектор для jQuery, чтобы проверить, имеет ли элемент одно из следующих свойств CSS:
Я хотел найти ближайшего прокручиваемого родителя другого элемента, поэтому я также написал еще один маленький плагин jQuery, чтобы найти ближайшего родителя с переполнением.
Это решение, вероятно, не работает лучше, но, похоже, работает. Я использовал его вместе с плагином $ .scrollTo. Иногда мне нужно знать, находится ли элемент внутри другого прокручиваемого контейнера. В этом случае я хочу прокрутить родительский прокручиваемый элемент против окна.
Я, вероятно, должен был обернуть это в один плагин и добавить селектор psuedo как часть плагина, а также выставить «ближайший» метод для поиска ближайшего (родительского) прокручиваемого контейнера.
Во всяком случае .... вот оно.
$ .isScrollable jQuery плагин:
$ (': scrollable') псевдо-селектор jQuery:
Плагин $ .scrollableparent () jQuery:
Реализация довольно проста
ОБНОВЛЕНИЕ: Я обнаружил, что Роберт Коритник уже придумал гораздо более мощный: прокручиваемый псевдоселектор, который будет определять прокручиваемые оси и высоту прокручиваемых контейнеров, как часть его плагина $ .scrollintoview () jQuery. scrollintoview плагин
Вот его причудливый псевдо-селектор (реквизит):
источник
Первое решение выше работает только в IE Второе решение выше работает только в FF
Эта комбинация обеих функций работает в обоих браузерах:
НТН
источник
(scrollWidth / Height - clientWidth / Height) является хорошим индикатором наличия полосы прокрутки, но во многих случаях дает ложный положительный ответ. если вам нужно быть точным, я бы предложил использовать следующую функцию. вместо того, чтобы пытаться угадать, является ли элемент прокручиваемым - вы можете прокрутить его ...
источник
Тьфу все ответы здесь неполны, и давайте прекратим использовать jquery в SO ответах, пожалуйста. Проверьте документацию jquery, если хотите получить информацию о jquery.
Вот обобщенная функция чистого javascript для проверки наличия или отсутствия у элемента ползун прокрутки:
источник
Я собираюсь рассказать об этом еще дальше тем беднягам, которые, как и я, используют одну из современных сред js, а не JQuery и были полностью заброшены людьми из этой ветки:
это было написано на Angular 6, но если вы напишите React 16, Vue 2, Polymer, Ionic, React-Native, вы будете знать, что нужно сделать, чтобы адаптировать его. И это весь компонент, так что должно быть легко.
в html будет div с классом "elem-list", который стилизован в css или scss, чтобы иметь значение a
height
иoverflow
значение, которого нетhidden
. (такauto
илиsroll
)Я запускаю это eval при событии прокрутки, потому что моей конечной целью было иметь «автоматическую прокрутку фокуса», которая решает, прокручивают ли они весь набор компонентов по горизонтали, если у указанных компонентов нет вертикальной прокрутки, а в противном случае прокручивает только внутренности одного из компоненты по вертикали.
но вы можете поместить eval в другом месте, чтобы он был вызван чем-то другим.
Здесь важно помнить, что вы никогда не будете вынуждены использовать JQuery, всегда есть способ получить доступ к тем же функциональным возможностям, которые у него есть, без его использования.
источник
this
сохраняет родительскую область видимости;th = this;
не нужноfunction(){}.bind(this)
Вот улучшенная версия ответа Эвана, которая, кажется, правильно учитывает логику переполнения.
источник
Решения, представленные выше, будут работать в большинстве случаев, но проверки scrollHeight и переполнения иногда недостаточно и может произойти сбой для элементов body и html, как показано здесь: https://codepen.io/anon/pen/EvzXZw
1. Решение - Проверьте, прокручивается ли элемент:
Примечание: элементы с
overflow: hidden
также рассматриваются как прокручиваемые ( больше информации ), так что вы можете добавить условие к этому тоже при необходимости:Насколько я знаю, этот метод не работает, только если элемент имеет
scroll-behavior: smooth
.Объяснение: хитрость в том, что попытка прокрутки вниз и возврата назад не будет отображаться браузером. Самая верхняя функция также может быть написана следующим образом:
Показать фрагмент кода
2. Решение - выполните все необходимые проверки:
источник
Вот мое улучшение: добавлен parseInt. по какой-то странной причине это не сработало без него.
источник
Работает на Chrome , Edge , Firefox и Opera , по крайней мере, в новых версиях.
Используя JQuery ...
Настройте эту функцию, чтобы исправить нижний колонтитул:
Возвращает функцию. Сделано таким образом, чтобы один раз установить тело и нижний колонтитул.
А затем установите это, когда документ будет готов.
Добавьте это к своему нижнему колонтитулу CSS:
источник
Большинство представленных ответов приблизили меня к тому месту, где я должен был быть, но не совсем там.
Мы в основном хотели оценить, будут ли полосы прокрутки видимыми в нормальной ситуации, по этому определению, означающему, что размер элемента тела больше, чем порт представления. Это не было представлено решение, поэтому я представляю его.
Надеюсь, это кому-нибудь поможет!
По сути, у нас есть
hasScrollbar
функция, но возвращаемая, если запрошенный элемент больше, чем порт просмотра. Для просмотра размера порта мы просто использовали$(window).height()
. Быстрое сравнение этого с размером элемента, дает правильные результаты и желаемое поведение.источник
Найдите родителя текущего элемента с вертикальной прокруткой или телом.
Может использоваться для автоматической прокрутки до текущего элемента через:
источник
Подход JavaScript без фреймворка, проверяет как вертикальное, так и горизонтальное
Используйте это так
источник