Наличие полосы прокрутки в окне программы под окнами означает, что
Обновлено: 24.11.2024
Иногда содержимое короткое (без полосы прокрутки), а иногда длинное (видимая полоса прокрутки).
19 ответов 19
небольшой плагин для него.
используйте это так,
протестировано в Firefox, Chrome, IE6,7,8
но не работает должным образом селектор тегов тела
Я обнаружил, что если у вас есть горизонтальная полоса прокрутки, которая приводит к появлению вертикальной полосы прокрутки, эта функция не работает.
Я нашел другое решение. использовать clientHeight
С этим связана проблема: если горизонтальная полоса прокрутки также существует, тогда будет возвращено значение false, даже если вертикальная полоса прокрутки существует до тех пор, пока высота не будет уменьшена на высоту горизонтальной полосы прокрутки.
Обратите внимание, что на компьютерах Mac полоса прокрутки плавает над содержимым и исчезает, когда она не используется. В Windows он всегда виден и занимает место по горизонтали. Поэтому тот факт, что содержимое можно прокручивать (что обнаруживает эта функция), не означает, что полоса прокрутки обязательно присутствует.
(function($) < $.fn.hasScrollBar = function() < return this.get(0).scrollWidth >this.width); > >)(jQuery); это работает для горизонтального переполнения. Подходит для проверки адаптивности веб-сайтов на мобильных устройствах в iframe.
Это можно сделать с помощью комбинации атрибутов Element.scrollHeight и Element.clientHeight.
Согласно MDN:
Атрибут Element.scrollHeight, доступный только для чтения, представляет собой измерение высоты содержимого элемента, включая содержимое, невидимое на экране из-за переполнения. Значение scrollHeight равно минимальному значению clientHeight, которое требуется элементу для размещения всего содержимого в точке обзора без использования вертикальной полосы прокрутки. Он включает заполнение элемента, но не его поля.
Свойство Element.clientHeight, доступное только для чтения, возвращает внутреннюю высоту элемента в пикселях, включая отступы, но не высоту горизонтальной полосы прокрутки, границу или поля.
clientHeight можно вычислить как CSS height + CSS padding - высота горизонтальной полосы прокрутки (если есть).
Поэтому элемент будет отображать полосу прокрутки, если высота прокрутки больше, чем высота клиента, поэтому ответ на ваш вопрос:
Вам придется запускать эту функцию каждый раз, когда непосредственно изменяется размер элемента или одного из его дочерних элементов (что также может повлиять на нее). Этот ответ менее чем наполовину полон без упомянутых вещей.
Возможно более простое решение.
Это предполагает, что полоса прокрутки находится в окне, а не в элементе div. Предложите изменить ссылку, чтобы предложить: «Если вам нужно только протестировать полосу прокрутки в главном окне, вы можете попробовать:»
Я должен немного изменить то, что сказал Рейгель:
innerHeight подсчитывает высоту элемента управления, а также его верхний и нижний отступы
Он не проверяет значение "переполнение", чтобы убедиться, что полосы прокрутки появятся, когда будет выполнено это условие scrollHeight.
@BT Но если у меня в css установлено автоматическое переполнение, то мне не нужна эта дополнительная проверка? Он сравнивает размеры, и этого достаточно.
Ответ, который работает только для вас, не является ответом. Откуда вы знаете, что у других людей есть в их css? В вашем ответе не упоминается это ограничение. Если кто-то не может добавить ваш ответ и заставить его работать, это плохой ответ.
Это расширяет ответ @Reigel. Он вернет ответ для горизонтальных или вертикальных полос прокрутки.
Вам нужен element.scrollHeight. Сравните это с $(element).height() .
Я создал новый пользовательский селектор :pseudo для jQuery, чтобы проверить, имеет ли элемент одно из следующих свойств css:
- переполнение: [прокрутка|авто]
- переполнение-x: [прокрутка|авто]
- переполнение-y: [прокрутка|авто]
Я хотел найти ближайший прокручиваемый родительский элемент другого элемента, поэтому я также написал еще один небольшой плагин jQuery для поиска ближайшего родительского элемента с переполнением.
Возможно, это решение не самое лучшее, но похоже, что оно работает. Я использовал его вместе с плагином $.scrollTo. Иногда мне нужно знать, находится ли элемент внутри другого прокручиваемого контейнера. В этом случае я хочу прокрутить родительский прокручиваемый элемент по сравнению с окном.
Возможно, мне следовало заключить это в один подключаемый модуль и добавить селектор psuedo как часть подключаемого модуля, а также предоставить «ближайший» метод для поиска ближайшего (родительского) прокручиваемого контейнера.
Кто угодно. вот оно.
Подключаемый модуль jQuery $.isScrollable:
$(':scrollable') псевдоселектор jQuery:
Подключаемый модуль jQuery $.scrollableparent():
Реализация довольно проста
ОБНОВЛЕНИЕ: я обнаружил, что Роберт Коритник уже придумал гораздо более мощный псевдоселектор :scrollable, который будет определять прокручиваемые оси и высоту прокручиваемых контейнеров, как часть его плагина jQuery $.scrollintoview(). Плагин scrollintoview
Вот его причудливый псевдо-селектор (реквизит):
Тьфу, все ответы здесь неполные, и давайте уже прекратим использовать jquery в ответах SO, пожалуйста. Проверьте документацию по jquery, если вам нужна информация о jquery.
Вот обобщенная функция на чистом javascript для полной проверки того, имеет ли элемент полосы прокрутки:
Почему нельзя использовать jquery в вопросе, отмеченном как jquery? Пожалуйста, добавьте ссылки на ту часть документации jquery, которую вы упомянули.
@kpull1 Слишком много людей отмечают jQuery в каждом вопросе, который у них возникает. Этот вопрос не имеет отношения к jQuery. В документации по jQuery нет ответа на этот вопрос, потому что jQuery этого не делает и не должен делать.
(scrollWidth/Height - clientWidth/Height) — хороший индикатор наличия полосы прокрутки, но во многих случаях он даст вам «ложноположительный» ответ. если вам нужно быть точным, я бы предложил использовать следующую функцию. вместо того, чтобы пытаться угадать, можно ли прокручивать элемент, вы можете прокручивать его.
Первое решение выше работает только в IE Второе решение выше работает только в FF
Эта комбинация обеих функций работает в обоих браузерах:
Я собираюсь еще больше рассказать об этом для тех несчастных, которые, как и я, используют один из современных фреймворков js, а не JQuery, и полностью отказались от людей из этой темы:
это было написано на Angular 6, но если вы напишете на React 16, Vue 2, Polymer, Ionic, React-Native, вы будете знать, что нужно сделать, чтобы адаптировать его. И это целый компонент, поэтому он должен быть простым.
в html будет div с классом "elem-list", который стилизован в css или scss, чтобы иметь высоту и значение переполнения, которое не скрыто. (то есть auto или sroll )
Я запускаю эту оценку при событии прокрутки, потому что моя конечная цель состояла в том, чтобы иметь «автоматические прокрутки фокуса», которые решают, прокручивают ли они весь набор компонентов по горизонтали, если указанные компоненты не имеют доступной вертикальной прокрутки, и в противном случае прокручивают только внутренности один из компонентов по вертикали.
но вы можете поместить eval в другое место, чтобы оно запускалось чем-то другим.
здесь важно помнить, что вы никогда не будете вынуждены вернуться к использованию JQuery, всегда есть способ получить доступ к тем же функциям, которые он имеет, не используя его.
Вертикальная или горизонтальная полоса, обычно расположенная в крайнем правом или нижнем углу окна, которая позволяет перемещать область просмотра окна вверх, вниз, влево или вправо. Большинство людей сегодня знакомы с полосами прокрутки, потому что им приходится прокручивать вверх и вниз почти каждую веб-страницу в Интернете.
Обзор полосы прокрутки
Ниже показано изображение окна Microsoft Windows с вертикальной и горизонтальной полосами прокрутки.
Как прокручивать и использовать полосу прокрутки
Полосы прокрутки используются с помощью мыши, сенсорной панели или клавиатуры. С помощью мыши вы можете перемещать полосу прокрутки, щелкая стрелку прокрутки на любом конце полосы прокрутки. Вы также можете щелкнуть пустую часть полосы прокрутки или перетащить ползунок прокрутки. На клавиатуре вы можете использовать клавиши со стрелками вверх или вниз для прокрутки нескольких строк за раз. Клавиши Page Up и Page Down или пробел позволяют прокручивать страницу вниз по одной странице за раз.
Сегодня большинство компьютеров оснащены мышью с колесиком или кнопкой, позволяющей прокручивать вверх и вниз, а в некоторых случаях и слева направо. Дополнительные сведения об этих мышах см. в определении IntelliMouse.
На компьютере Apple некоторые программы, например Safari, могут не отображать полосу прокрутки. Для прокрутки вверх и вниз в этих программах коснитесь двумя пальцами сенсорной панели или сенсорной мыши и перетащите их вверх или вниз.
См. нашу страницу с сенсорной панелью, чтобы узнать о других способах прокрутки с помощью сенсорной панели ноутбука.
Как использовать или включить горизонтальную полосу прокрутки?
Горизонтальная полоса прокрутки часто отсутствует или отключена, потому что отображаемый текст или другое содержимое переносится или изменяется в размере для предотвращения горизонтальной прокрутки. Например, на этой веб-странице отсутствует горизонтальная прокрутка, поскольку она рассчитана на размер экрана. Если вы просматриваете страницу с горизонтальной прокруткой, вы можете прокрутить вправо, щелкнув стрелку вправо на горизонтальной полосе прокрутки.
Чтобы включить горизонтальную прокрутку в длинном текстовом документе, можно отключить перенос слов. При работе с изображениями или другими документами увеличение также включает горизонтальную прокрутку.
Сколько полос прокрутки в окне?
Часто в окне есть только одна полоса прокрутки, которая представляет собой вертикальную полосу прокрутки, позволяющую прокручивать окно вверх и вниз. Многие программы автоматически переносят текст в окно при изменении размера окна или увеличении документа. Программы с фиксированным размером окна или без переноса слов отображают горизонтальную полосу прокрутки при изменении размера окна.Для этих программ будет две полосы прокрутки, горизонтальная и вертикальная полоса прокрутки.
Должен ли я использовать «полосу прокрутки» или «полосу прокрутки» в своем письме?
И "полоса прокрутки", и "полоса прокрутки" являются правильными в зависимости от контекста и места их использования или соблюдения руководства по стилю. В большинстве руководств по стилю два слова «полоса прокрутки» используются при описании полосы или функции, которая позволяет вам прокручивать вверх, вниз, влево или вправо. При обращении к конфигурации, объекту или параметру «полоса прокрутки» используется одно слово.
Такой банальный вопрос, как отсутствие полосы прокрутки, может повлиять на привлекательность вашего веб-сайта. Полосы прокрутки тесно связаны с контентом: они появляются, когда контент растет, и исчезают, когда он ослабевает. На эту динамику влияют два элемента: контейнеры, содержащие содержимое, и программирование веб-страницы.
Объем контента
Полосы прокрутки могут исчезнуть, если содержимое помещается в контейнер. Например, текстовая область может изначально содержать гораздо больше текста, чем она может отобразить за один раз. Текстовая область указывает на наличие этого лишнего текста, показывая полосы прокрутки. Если вы вырежете или удалите достаточное количество текста этого элемента управления, полосы прокрутки исчезнут.
Масштаб содержания
При уменьшении размера существующего контента полосы прокрутки могут исчезнуть. Например, уменьшение свойства font-size абзаца приведет к уменьшению всего текста в этом абзаце; это означает, что для абзаца потребуется меньше места. Если размер шрифта уменьшится до такой степени, что весь абзац сможет поместиться внутри содержащего его элемента Div, то Div не будет нуждаться в полосах прокрутки для размещения абзаца.
Увеличение в браузере
Использование элементов управления увеличением или масштабированием в браузере может привести к исчезновению полос прокрутки. Наблюдайте за этим явлением, открыв веб-страницу и несколько раз нажав «Ctrl-». Ваши действия приводят к уменьшению размера содержимого страницы. Меньший размер занимает меньше места на экране, что снижает вероятность выхода контента за пределы страницы. Так как содержимое имеет все необходимое пространство, ему больше не нужны полосы прокрутки.
Размер контейнера
Полосы прокрутки могут исчезнуть, когда элемент страницы, содержащий содержимое, расширяется, чтобы вместить избыточное содержимое. Например, вы можете изменить размер окна веб-браузера так, чтобы оно занимало только половину доступной ширины вашего монитора. Это действие приводит к появлению горизонтальной полосы прокрутки, потому что содержимое страницы не помещается в таком узком пространстве. Нажатие кнопки "Развернуть" в окне браузера увеличит ширину окна до ширины монитора, что приведет к исчезновению горизонтальной полосы прокрутки.
Программирование страницы
Полосы прокрутки могут исчезнуть, если веб-разработчик пишет операторы программирования, препятствующие их отображению. Например, когда элемент HTML Div содержит больше текста, чем может отобразить за один раз, разработчик может указать, что элемент Div скрывает лишнее, а не размещает его с помощью полос прокрутки. Разработчик достигает этого, создавая операторы CSS или каскадных таблиц стилей. Следующая инструкция CSS скрывает лишний текст Div, а не указывает на его присутствие полосами прокрутки: overflow:hidden.
Информация о версии
Информация в этой статье относится к программированию HTML и CSS. В зависимости от других технологий он может незначительно или значительно отличаться.
DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.
- Содержимое не перекомпоновывается в зависимости от того, есть полоса прокрутки или нет
- Пользователи одинаково взаимодействуют независимо от того, есть ли у них «наложенные» полосы прокрутки или нет.
Итак, мы все находимся на одной странице. Полоса прокрутки – это элемент, обычно расположенный сбоку от браузера (формально именуемый в спецификации «агентом пользователя» или UA), который указывает относительное положение прокрутки. к общему доступному пространству на веб-странице.
Они традиционно представляли собой визуальный контейнер со скользящим индикатором. Они называются классическими полосами прокрутки. Индикатор находится внутри поля, а поле занимает физическое пространство на экране, когда оно отображается.
Однако в последнее время внешний вид полосы прокрутки стал гораздо более минималистичным. Мы называем эти оверлейные полосы прокрутки, и они частично или полностью прозрачны, располагаясь поверх содержимого страницы. Другими словами, в отличие от классических полос прокрутки, которые занимают физическое пространство на экране, накладные полосы прокрутки размещаются поверх содержимого экрана.
При этом полосы прокрутки могут появляться в других местах.Помимо расположения справа от браузера, мы увидим полосы прокрутки на элементах HTML, где содержимое выходит за пределы элемента, а свойство переполнения (или overflow-x и overflow-y) установлено на значение прокрутки. И обратите внимание, что наличие overflow-x означает, что у нас есть горизонтальная прокрутка в дополнение к вертикальной прокрутке.
Это то, о чем мы говорим. Не сам индикатор, а контейнер, в котором он находится. Это желоб. Использует ли браузер классическую или оверлейную полосу прокрутки, полностью зависит от самого ПА. Это не нам решать. Это относится и к ширине полосы прокрутки. Пользовательский агент определяет это и не дает нам никакого контроля над этим.
Именно здесь на помощь приходит полоса прокрутки. Мы можем указать, присутствует ли полоса прокрутки в ее классическом и оверлейном вариантах.
Двойной амперсанд (&&) разделяет два или более компонентов, которые должны встречаться в любом порядке.
Вопросительный знак (?) указывает на то, что предыдущий тип, слово или группа являются необязательными (встречаются ноль или один раз).
- auto (начальное значение): почти описанное выше поведение по умолчанию. Установка этого свойства для этого значения позволяет классическим полосам прокрутки использовать недвижимое пространство в пользовательском интерфейсе для элементов, для которых свойство переполнения этих элементов установлено на прокрутку или авто. И наоборот, накладные полосы прокрутки вообще не занимают места, располагаясь поверх элемента.
- stable : это добавляет немного самоуверенного поведения, всегда оставляя место для желоба полосы прокрутки, пока свойство переполнения для того же элемента установлено на прокрутку или автоматически и мы имеем дело с классическая полоса прокрутки — даже если поле не переполняется. И наоборот, это не повлияет на полосу прокрутки наложения.
Рабочий проект спецификации содержит очень удобную таблицу, в которой эти определения разбиваются на контексты, чтобы показать их отношение к классическим полосам прокрутки и наложенным полосам прокрутки.
| переполнение | полоса прокрутки | Переполнение | Не переполнение |
|---|---|---|---|
| прокрутка | авто | да | да | стабильный | да | да |
| авто | авто | да | |
| стабильный | да | да | |
| скрытый | авто | ||
| стабильный | да | да | |
| видимый, клип | авто | ||
| стабильный |