Загрузка...Как называется ползунок справа в браузере
Стилизация и создание скриптов для ползунков
В настоящее время я работаю над своим первым оплачиваемым проектом. Помимо всего прочего в этом проекте от меня требуется стилизация и написание скриптов для ползунков. Есть несколько интересных моментов, на которые мне бы хотелось обратить ваше внимание, такие как проблемы отображения в IE , Android WebKit и правильное использование событий ввода и изменения. А также краткий обзор синтаксиса.
Вот мой пример . В этом конкретном случае пользователей из Голландии с помощью ползунков просят разделить 100 миллионов евро бюджетных средств между несколькими ведомствами. При этом общее значение всех ползунков не должно превышать 100 ( миллионов ), что требует написание небольшого скрипта.
Ползунок, дорожка и бегунок
Вот ползунок. Технически он известен как , и он не поддерживается IE9 и ниже.
Ползунок состоит из дорожки, по которой пользователь перетаскивает бегунок. К дорожке и бегунку можно применять стили, но не скрипты.
Основы стилей
Стилизация ползунков не так уж трудна. Для бегунка и дорожки можно настроить стили, хотя необходимые псевдоэлементы зависят от браузера:
Для бегунка используется -webkit-slider-thumb , -moz-range-thumb или -ms-thumb .
К дорожке можно « обратиться » с помощью -webkit-slider-runnable-track , -moz-range-track или -ms-track .
Нельзя комбинировать эти селекторы в одном правиле, даже несмотря на то, что правильнее использовать для всех браузеров одни и те же стили ( кроме отступов для бегунка ). Если браузер находит один селектор, который он не распознает, то игнорирует все остальные. Поэтому вам придется повторяться или использовать генератор CSS на серверной стороне.
IE и MS Edge требуют прозрачный color и border-color на дорожке, или они отобразят стили дорожки по умолчанию. Кроме того, для ползунка им нужны иные отступы, чем в других браузерах.
В моем примере высота ползунка примерно 40 пикселей. Оказывается, в основных стилях ползунка установлено свойство overflow: hidden , которое скрывает большую часть ползунка в Edge и IE . Чтобы исправить это, мне пришлось явно задать высоту ползунка.
В IE , но не в Edge , ползунок имеет отступ. Поэтому задайте отступ padding: 0 и спасите себя от головной боли.
Я читал несколько раз, что MS Edge должен поддерживать свойства -webkit- . Но на практике оказалось, что невозможно работать с одним набором стилей и для Edge , и для WebKit/Blink . Я советую использовать отдельные -ms- стили хотя бы потому, что они нужны для IE10 и IE11 . Лучше всего определить стили -ms- после -webkit- : таким образом -ms- стили будут точно выполняться в Edge .
В браузерах, построенных на основе движков WebKit и Blink , бегунок имеет по умолчанию box-sizing: border-box , в то время как во всех остальных браузерах, значение этого свойства равно content-box . Лучше задать box-sizing для бегунка в явном виде.
WebKit и Blink также требуют -webkit-appearance: none , но с одним исключением. Смотрите ниже.
CSS шаблон
Все эти несущественные проблемы приводят к следующему шаблону CSS :
Свойство appearance и ошибка Android WebKit
Еще один недостаток в браузерах на основе WebKit и Blink заключается в том, что вы должны установить свойство -webkit-appearance: none для ползунка и для бегунка ( но не для дорожки ). Это показано в шаблоне CSS , приведенном выше.
Настоящая проблема в том, что Android WebKit требует от вас не использовать это объявление. Если вы добавите -webkit-appearance: none , Android WebKit будет неправильно отображать ваши стили. Удаление этого кода исправляет ошибку, но тогда стили ползунка не будут отображаться в Safari , Chrome и некоторых других браузерах. Решим эту проблему вместе.
Мы задали в CSS -webkit-appearance: none , это единственное решение, у которого есть будущее. В Android WebKit мы хотим изменить значение на slider-horizontal . Но как мы узнаем, что мы в Android WebKit ?
Распознавание браузера? Так не принято в наших кругах – что и к лучшему: это не сработало бы в Xiaomi Chromium 34 ( или 35 ), который базируется на Chromium и, следовательно, требует значение none, но при этом « маскируется » под Android .
Моим первоначальным планом было получить доступ к стилям бегунка и посмотреть, соответствуют ли они моим. Если они не подходят, то мы применяем slider-horizontal :
Оказывается, этот подход всегда выводит стили по умолчанию, а не ваш CSS . Говоря в общих чертах, скрипты, которые пытаются сделать что-то с дорожкой или бегунком, имеют тенденцию не работать.
Затем я увидел, что это применение getComputedStyle() не поддерживается в Android WebKit . Ни один стиль не возвращается, даже стили по умолчанию.
Поэтому я написал классический трюк, который использует одну ошибку, чтобы избавиться от другой, несвязанной с ней. К счастью, это безопасный прием, так как обе ошибки могут появиться только в Android WebKit , и этот браузер уже не разрабатывается:
Вы можете выполнить тест один раз и использовать результаты для каждого ползунка. Неважно, какое свойство CSS вы тестируете, проверьте, действительно ли оно существует. Если значение не возвращается, то устанавливаем -webkit-appearance: slider-horizontal для каждого ползунка. Проблема решена. Даже лучше, другие браузеры игнорирует нас, пока мы используем — webkit- .
Заполнение полосы прогресса
В моем примере дорожка слева от бегунка должна иметь цвет фона отличный от дорожки справа. IE/Edge и Firefox предлагают для этого использовать псевдоэлементы, WebKit и Blink – нет. Этот код решает проблему во всех версиях IE , Firefox и Edge :
Что касается браузеров на основе WebKit- и Blink, то тут нужно решение с JavaScript. Я одолжил свое из примеров Ana Tudor . В этом решении используется линейный градиент со стоп-цветом, вычисляемым от текущего значения ползунка. Посмотрите скрипт , особенно код функции handleSlider() .
Всплывающие подсказки
Ana Tudor также показала, как можно использовать псевдоэлемент :before в качестве стилизованной подсказки, содержащей текущее значение. К сожалению, выяснилось, что в этом случае IE/Edge и Firefox не поддерживают :before или :after . В IE/Edge есть встроенная подсказка ( смотрите ниже ), но в Firefox невозможно отобразить всплывающие подсказки.
Я пробовал движущийся элемент, реагирующий на перемещение бегунка, но написание скриптов не срабатывает, и получить текущие координаты бегунка невозможно. Также пытался использовать текущее значение ползунка вместо координат, но попытка завершилась провалом. В конечном счете, мы решили использовать статическую подсказку ( которая в действительности не выглядит как подсказка ).
В IE/Edge есть встроенная подсказка, которая по большей части не может быть стилизована. К счастью, вы можете скрыть ее:
События ввода и изменения
Когда пользователь передвигает бегунок по дорожке, ползунок может вызывать события ввода или изменения. Одни браузеры непрерывно « порождают » события во время перемещения, другие – только после остановки перемещения.
При отслеживании действий пользователя с ползунком перехватывайте события ввода и изменения. Затем вызывайте обработчик события, когда пользователь прекратит перемещение бегунка. Это дает стабильный результат во всех браузерах:
Хотя стабильное отслеживание каждого отдельного пикселя перемещения возможно в некоторых браузерах, а другие браузеры вообще не поддерживают это. И это привело бы к лишним затратам ресурсов, особенно на мобильных устройствах. Но я был бы рад, если кто-нибудь опровергнет эти предположения.
Данная публикация представляет собой перевод статьи « Styling and scripting sliders » , подготовленной дружной командой проекта Интернет-технологии.ру
Как убрать полосу прокрутки в любом браузере
Наверняка, большинство пользователей даже не замечает один очень древний, некрасивый, почти бесполезный, но постоянно занимающий при этом кусочек пространства в рабочем окне любого обозревателя сети Интернет, элемент интерфейса — вертикальную полосу прокрутки страницы.
Этот рудимент кочует по версиям и программам от разных производителей многие годы, практически без изменений, а ведь его можно легко и быстро скрыть или сделать современным, практичным, удобным, оригинальным…
Скрываем полосу прокрутки в популярных браузерах
Ниже расскажу и покажу, как убрать полосу прокрутки в любом браузере.
При этом, в одном обозревательном движке это дело скроется совсем, а в другом (самом популярном), невзрачная и ворующая полезное пространство полоска с ползунком научится интеллектуально, когда надо, уменьшаться или увеличиваться в размерах, а также, исчезать полностью.
Данный материал категорически не рекомендуется владельцам компьютерных мышек без колёсика или сенсорного элемента для скролла, а также просто любителям постоянно теребить курсором ползунок прокрутки интернет-страницы.
Очень советую спрятать скроллбар владельцам ноутбуков, чтоб максимально оптимизировать доступное рабочее пространство на экране монитора при серфинге по сети Интернет.
Как убрать полосу прокрутки в Mozilla Firefox
Данный способ применим к абсолютно всем клонам этого, когда-то очень популярного и удобного обозревателя сети.
К сожалению, скрытие полосы прокрутки в нём возможно только с помощью дополнений и исключительно полностью (если ошибаюсь — поправьте меня в комментариях).
Идём в дополнения Mozilla Firefox…
Читайте также на сайте:
…и в поисковую строку открывшейся страницы…
…вбиваем (копи-пастим со строки ниже) название дополнения для скрытия вертикальной полосы прокрутки в Mozilla Firefox…
hide-scrollbars
Тыкаем «Enter» на любимой клавиатуре и получаем результат поиска в фирменном магазине дополнений…
Как видите, наша цель на первом месте, но дополнение «Scrolantana» абсолютно идентично «hide-scrollbars» — точно также полностью убирает полосу прокрутки с наших глаз.
Каким воспользоваться — решайте сами (устанавливал их оба, но почему-то остановился на первом, как и 1279 пользователей).
Теперь в Вашем браузере Mozilla Firefox (и во всех его клонах) совсем нет вертикальной полосы прокрутки справа и рабочее пространство на капельку увеличилось (мелочь, а приятно)…
Вернуть скроллбар можно только методом отключения выбранного для использования дополнения.
Как убрать полосу прокрутки в Google Chrome
Гораздо интереснее получается история с полосой прокрутки в самом популярном и производительном (на данный момент времени) браузере — каких-либо расширений или плагинов для скрытия этого дела не нужно в нём задействовать.
Более того, ползунок скроллбара в Хроме не просто скрывается на постоянной основе, как у менее продвинутого коллеги, а приобретает вид тонкой и стильной полоски при движении страницы, которая расширяется при наведении курсора на неё.
Полностью исчезает полоса прокрутки в Google Chrome лишь при остановке страницы в одном положении.
Не знаю, поняли моё описание выше или нет, но точно Вам понравится современный и практичный вид обновлённого с помощью встроенной скрытой функции древнего элемента интерфейса. Это из разряда «словами не передать — надо видеть».
Все подражатели (клоны), которым не счесть числа, обозревателя от корпорации Google (точнее, которые на одном с ним движке работают) имеют встроенную возможность (экспериментальную функцию) для изменения вида самой идеологии многократно упомянутой выше полоски, что справа живёт в окне браузера.
Описанный ниже способ скрытия абсолютно лишнего элемента интерфейса в данном обозревателе (и ему подобным) уже не работает (нет пункта в скрытых настройках), но есть расширение Minimal Scrollbar, которое поможет Вам с этим делом, даже в новом Microsoft Edge.
Всё очень легко и просто — печатаем адрес в (омнибокс) адресную строку (копируем и вставляем из строки ниже)…
chrome://flags/
…и тыкаем «Enter» на клавиатуре — попадаем в секретный раздел браузера Google Chrome, в котором нужно воспользоваться поисковой строкой…
Прописываем в неё (копируем и вставляем из строки ниже) такой параметр…
Overlay Scrollbars
…и сразу (без тыканья кнопок на клавиатуре) получаем результат…
Активируем первый пункт…
…и применяем изменения (перезапускаем обозреватель)…
Слышу восхищённые возгласы и хлопки в ладоши — значит не зря тыкал эти буковки на клавиатуре сегодня. Рад, что Вам понравилась обновлённая фишка браузера от «корпорации добра», которая теперь выглядит стильно и модно, при этом освобождает несколько пикселей в окне программы для полезного контента.
Как писал выше — почитатели и пользователи обозревателей Opera и Яндекс.Браузера точно таким же методом могут осовременить свою полосу прокрутки.
Что касается самого распространённого… средства для скачивания нормальных браузеров под названием Microsoft Edge, то вполне ожидаемо скрыть или вообще, что-либо сделать с данным элементом интерфейса в нём невозможно (может ситуация изменится с официальным выходом в свет версии программы на базе Chromium).
Краткий итог
- В своём стандартном виде полоса прокрутки в любом браузере имеет печальный старинный вид и требует скрытия (модификации).
- Убрать полосу прокрутки в Mozilla Firefox полностью можно с помощью дополнений «hide-scrollbars» или «Scrolantana».
- Модифицировать и заметно осовременить скроллбар в Google Chrome можно с помощью экспериментальной функции «Overlay Scrollbars».
- Microsoft Edge в топку!
До новых полезных компьютерных программ и интересных приложений для Андроид.
P.S. Какой лихой был в конце 2019-го года, а теперь вот «плотно сижу» уже на новеньком Microsoft Edge (как все быстро меняется «в нашем мире бушующем…».
Кстати, ему тоже подходит для описанной в статье цели расширение Minimal Scrollbar.
Как называется ползунок справа в браузере
Для перемещения текста в окне с помощью мыши существуют так называемые линейки скроллинга, или полосы прокрутки. Они бывают горизонтальными и вертикальными.
B.7.1. Назначение горизонтальной и вертикальной полос прокрутки.
Размеры рабочей области окна порой значительно превосходят размер рабочей области экрана. Поэтому может случиться, что даже в распахнутом во весь экран окне не будет целиком помещаться текст или изображение, с которым работает пользователь.
Для того чтобы просмотреть содержимое рабочей области уже в интерфейсе командной строки использовалась операция скроллинга , или прокрутки. При нажатии на определенные клавиши экран мог сдвигаться на одну позицию (символ или строку) вверх, вниз, вправо и влево. При нажатии других клавиш текст перемещался на один экран влево, вправо, вверх и вниз. С появлением WIMP — интерфейса эти же операции стали осуществляться при помощи мыши. Таким образом, появились полосы прокрутки. Для прокрутки текста в окне вверх-вниз стала использоваться вертикальная, а для перемещения вправо-влево — горизонтальная линия прокрутки.
B.7.2. Расположение полос прокрутки.
Горизонтальная полоса расположена в нижней области окна справа, а вертикальная — на правой границе области внизу. Полосы имеют две стрелки на краях полосы, собственно полосы и маркера, показывающего положение выводимого участка текста относительно его правой и левой границы — для горизонтальной полосы, или его верхней и нижней строки — для вертикальной полосы.
B.7.3. Чем управляются линии прокрутки, и какие при этом могут возникнуть сложности?
Линиями прокрутки можно управлять как клавишами передвижения курсора, так и с помощью мыши (правда, не всегда эти действия синхронизированы, поскольку клавиатура управляет текстовым курсором, а он не всегда перемещается линиями прокрутки.) Поэтому для гарантированного перемещения текстового курсора используйте только клавиатуру !
B.7.4. Основные приемы работы с линиями прокрутки.
Приемы работы с линиями прокрутки.
Действие: поднятие на одну позицию (строку) вверх.
с помощью мыши: выбор кнопки «стрелка вверх » вертикальной линии прокрутки.
с помощью клавиатуры:
нажать клавишу «стрелка вверх «.
Действие: переход на одну позицию (строку) вниз.
с помощью мыши: выбрать кнопку «стрелка вниз » вертикальной полосы прокрутки.
c помощью клавиатуры: нажать клавишу «стрелка вниз»
Действие: перемещение на одну позицию влево.
(Примечание: горизонтальная позиция — либо символ, либо группа символов фиксированного размера, например, элемент списка)
с помощью мыши: выбор кнопки «стрелка влево » горизонтальной линии прокрутки.
с помощью клавиатуры: нажатие клавиши «стрелка влево «.
Действие: перемещение на одну позицию вправо.
с помощью мыши: выбор кнопки «стрелка вправо » горизонтальной линии прокрутки.
с помощью клавиатуры: нажатие клавиши «стрелка вправо «.
Действие: перемещение текста на один экран вверх.
с помощью мыши: щелчок левой клавишей мыши на вертикальной полосе прокрутки выше маркера.
с помощью клавиатуры: нажатие клавиши PgUp.
Действие: перемещение текста на экран вниз.
с помощью мыши: щелчок левой клавишей на вертикальной полосе прокрутки ниже маркера.
с помощью клавиатуры:
нажатие клавиши PgDn.
Действие: перемещение текста на экран влево.
выбрать участок слева от маркера на горизонтальной полосе прокрутки.
с помощью клавиатуры:
нажатие Ctrl + PgUp.
Действие: перемещение текста на один экран вправо.
с помощью мыши: выбор участка справа от маркера на горизонтальной полосе прокрутки.
с помощью клавиатуры:
нажать клавиши Ctrl + PgDn.
Следующее действие реализуется только с помощью мыши.
Действие: перемещение текста относительно его первоначального положения в окне
б) вправо — влево
а) 1) перемещение маркера вертикальной полосы прокрутки вверх или вниз,
2) Вращением колесика у Microsoft InteliMouse.
б) перемещение маркера горизонтальной полосы прокрутки вправо или влево.
B.7.5. Дополнительные элементы линий прокрутки.
Существуют также дополнительные кнопки, например, для листания страниц текста, не помещающихся на одном экране, увеличения или уменьшения масштаба выводимого текста, разбивка окна документа на две части и другие возможности, описание которых смотри в руководстве пользователя (User’s Guide) для вашего продукта или контекстную справку. Многие из этих функций реализуются аналогом линии прокрутки — ползунком.
B.7.6. Элементы графического интерфейса, производные от линейки скроллинга.
B.7.6.1. Что такое ползунок?
Ползунок (slider) позволяет (возможно, с некоторым шагом) изменять числовое значение связанной с ним величины. Для этого ползунок перетаскивается на нужное место. Вообще ползунок очень похож на линейку прокрутки, однако он отличается от нее внешним видом и отсутствием стрелок на концах.
B.7.6.2. Как изменять значения на ползунке?
a) Переместить ползунок мышью, или
b) Щелкнуть мышью на шкале слева (справа) или сверху (снизу) ползунка. При этом однократный щелчок приведет к перемещению ползунка на одно деление, а нажатие и удержание клавиши обеспечивает перемещение ползунка до тех пор, пока Вы не отпустите кнопку или до тех пор, пока ползунок не достигнет позиции курсора.
С помощью клавиатуры:
Нажать клавиши «стрелка влево » («стрелка вправо «) или «стрелка вверх » («стрелка вниз «), в зависимости от расположения ползунка.
B.7.6.3. Что такое счетчик?
Счетчик (spinner, spin box) является гибридом ползунка и поля ввода. Содержит поле ввода , кнопки «стрелка вверх » и «стрелка вниз «, а также промежуток между ними.
B.7.6.4. Как ввести требуемое значение в счетчик?
Требуемое значение можно выставить щелчками мыши по кнопкам.
Замечание автора для Windows 95/98. Если необходимо пролистать счетчик на большое число позиций назад (вперед), то необходимо:
1. Выбрать мышью промежуток между кнопками.
2. Не отжимая кнопки, потянуть мышью этот промежуток вверх (вниз) экрана. При этом курсор мыши не изменит своей формы, однако значение в поле ввода будет изменяться.
3. Выбрав нужный вариант, отпустите кнопку мыши.
С помощью клавиатуры:
Для изменения значения в выделенном счетчике на одну единицу можно также использовать клавиши «стрелка вверх » и «стрелка вниз «.
Требуемое значение можно также набрать на клавиатуре (как в строке редактирования).
B.7.7. Резюме.
Итак, Вы познакомились с одним из важных элементов графического интерфейса — полосой прокрутки, его назначаем и правилами работы с ним. Полосы прокрутки используются во всех окнах WIMP интерфейса, а также таких элементах, как список — о нем будет сказано в следующем разделе. На основе линеек скроллинга появилось множество новых элементов, с частью из которых Вы также познакомились. Использование полос прокрутки придает графическому интерфейсу большую выразительность и удобство работы, по сравнению с интерфейсом командной строки.
Элементы интерфейса сайта
Элементы интерфейса, их еще называют элементы управления, которые используются при разработке сайта и при его использовании. Рассказываем, что есть что на самом деле.
Кнопка — элемент, при нажатии на который происходит какое-то действие на сайте.
Radiobutton — позволяет пользователю выбрать одну опцию
Checkbox — позволяет выбрать несколько опций
Select — позволяет пользователю выбрать одну опцию из выпадающего списка
Accordeon — элемент интерфейса состоящий из заголовков и скрываемого и открываемого контента.
Слайдер — переключатель изображений (или другого контента) работающий автоматически или вручную
Контент — текст, изображения, видео, то есть наполнение сайта.
Popup — небольшое всплывающее окно в углу экрана.
Модальное окно — разновидность всплывающего окна. Оно появляется на большую часть экрана и блокирует работы с остальным сайтом. Это может быть форма обратной связи, или просмотр фотографий в вк и фейсбуке.
Блок (Экран) — смысловой элемент включающий в себ я информацию только об одной сущности. Обычно блок начинается с заголовка и отделен от следующего каким-либо визуальным решением, цветом, линией, тенью.
Раздел — страница сайта. Тут все просто.
Шапка (хеддер / header) — самая верхняя часть сайта. Обычно в ней расположены логотип, меню и контактная информация. Шапка чаще всего бывает закрепленной, т.е она перемещается вместе с перемещением пользователя по странице.
Подвал (футер / footer) — самая нижняя часть сайта. Чаще всего в ней расположена карта сайта, контактные данные, быстрые ссылки на популярные разделы, копирайт, политика конфиденциальности и ссылка на разработчика сайта
Галерея — набор из нескольких изображений
Превью (preview) — изображение или часть другого контента, уменьшенная в размере. При нажатии на превью открывается исходный размер контента, отображаемого в превью.
Бордер — обводка элемента. Бывает solid (цельной), dashed (линиями) и dotted (точками)
Тултип (tooltip) — подсказка, всплывающая при наведении на элемент
Курсор Поинтер (Pointer) — тип курсора в виде руки с вытянутым указательным пальцем. Обычно появляется при наведении на ссылку
Курсор Текст (Text) — тип курсора, стандартный для редактирования текста
Навигация — любой вид элементов позволяющая перенаправлять пользователя на похожий элемент будь то страница, другая картинка, следующий текст и так далее.
П агинация — нумерация страниц, обычно отображенная как навигация в конце страницы
Списки — в веб интерфейсах присутствуют нумерованные списки (цифрами) , маркированные списки (точки, квадратики, кружки, черточки) и списки определений
Стрелочки — вид навигации.
Поисковая строка — строка для ввода поискового запроса
Плеер — элемент воспроизводящий аудио и видеофайлы
Ползунок — предназначен для ввода чисел в указанном диапазоне
Текстовое поле — поле для ввода текстовых значений
Поле пароля — поле для ввода пароля. Автоматически скрывает символы, заменяя их на точки.
Маска — это значения, указывающие формат допустимых значений входных данных в поле.
Ссылка — элемент интерфейса перенаправляющий вас по адресу, указанному в нем.
Якорь — элемент интерфейса перенаправляющий вас по адресу и к конкретному элементу, указанному в нем
Вкладки (табы) — элемент интерфейса, так же как и аккордеон, состоит из заголовка и скрытого контента, на который можно попасть при обращении к заголовку
Строка загрузки — элемент, показывающий степень загрузки контента или исполняемой функции
Переключател ь (switch) — элемент интерфейса, который позволяет выбрать одно из состояний, чаще всего вкл/выкл
Алерт окно — всплывающее окно, блокирующее взаимодействие пользователя не только с элементами на данной страницы, но и в целом со всем браузером
П релоадер (Preloader) — анимированный элемент, воспроизводящийся в процессе загрузки сайта, видео, изображений и другого контента.
Рейтинг (Rating bar) — элемент интерфейса показывающий среднюю оценку
Теги — элемент чаще всего располагающийся под контентом. Показывает принадлежность статьи, товара и пр. к конкретной категории. Зачастую при нажатии на тег, вы попадете на страницу со всем контентом, у которого есть такой тэг
Хлебные крошки — навигационная цепочка — элемент интерфейса, показывающий путь от начала до того уровня, где в данный момент находится пользователь.
Как определить, на какой стороне браузера находится полоса прокрутки-справа или слева (в случае RTL)?
Для некоторые браузеры (Safari, Edge, IE) автоматически перемещают полосу прокрутки влево, что является правильным поведением:
К сожалению, основные браузеры (Chrome и Firefox) ведут себя по-другому, полоса прокрутки по-прежнему находится на правой стороне браузера.
Можно ли определить программно (предпочтительно с помощью vanilla JS), на какой стороне находится полоса прокрутки?
UPD (28.09.2018): до сих пор в ответах нет рабочего решения, люди пытаются определить положение полосы прокрутки с помощью getBoundingClientRect().left или .offsetLeft , и это не сработает, потому что это всегда будет 0 , по крайней мере, в Edge независимо от положения полосы прокрутки.
UPD (15.10.2018): TLDR: это невозможно.
Похоже, что браузеры не предоставляют API для обнаружения стороны полосы прокрутки. В ответах ниже есть трюки с вставкой фиктивного div и вычислением, где находится полоса прокрутки в этом div. Я не могу рассматривать эти трюки как ответ, потому что полоса прокрутки документа может быть расположена несколькими способами ( , RTL версия OS, настройки браузера и т. д.)
7 Ответов
Как показано здесь , полоса прокрутки не изменит сторону с dir=»rtl» на html или body HTML тега в Firefox, Chrome, Opera & Safari. Он работает на краю IE &. Я пробовал (на Edge 17, IE 11, Firefox 62, Chrome 69, Opera 56, Safari 5.1), и он по-прежнему актуален в октябре 2018 года (Safari > 9.1 отображать полосу прокрутки слева, если dir=»rtl» ).
Я не нашел никакого кросс-браузерного собственного решения до сих пор, чтобы найти положение полосы прокрутки , как вы просили. Я не думаю, что у вас есть один. Мы можем только попытаться найти «hack», чтобы исправить это.
Основываясь на вашем вопросе / комментариях и на вашей реальной проблеме здесь , я думаю, что было бы лучше сосредоточиться на совместимости dir=»rtl» . Вы пытаетесь выяснить положение полосы прокрутки, потому что она не работает, как ожидалось в первую очередь. Чтобы заставить его работать, как ожидалось, быстрое исправление может заключаться в том, чтобы поместить прокрутку на элемент body :
Этот код css сделает элемент body для прокрутки вместо элемента html . Как ни странно, поместите прокрутку на body , чтобы отобразить полосу прокрутки в нужном месте. Он работает для последних версий браузеров.
Точная совместимость (самая старая рабочая версия протестирована) :
- IE = > v6-2001
- Край = > все
- Firefox = > v4-2011
- Opera = > v10-2009
- Chrome = > v19-2012
- Safari => v10.1 — 2016
С браузерами, которые совместимы, вы можете «trust» положение полосы прокрутки на основе атрибута dir . Это означает, что для браузеров, перечисленных выше, полоса прокрутки будет слева для dir=»rtl» и справа для dir=»ltr» . Я проверил, и это работает.
Для более старых версий браузеров, у меня нет исправления на данный момент. Это означает, что вы не будете полностью совместимы, но это в основном проблема с safari, как вы можете видеть.
EDIT: исследование, чтобы найти положение полосы прокрутки
Как я уже упоминал выше, я думаю, что мы можем попытаться найти «hack», чтобы найти положение полосы прокрутки. Я не эксперт css, поэтому мое решение не очень красиво. Кто-то с навыками css, вероятно, мог бы найти хорошее решение.
Если прокрутка находится на теле (решение Выше), мы можем обнаружить положение полосы прокрутки с элементом css positioned. Например этот код :
Совместимость (самая старая рабочая версия протестирована):
- IE = > v6-2001
- Край = > все
- Firefox = > v4-2011
- Opera = > v10-2009
- Chrome = > v15-2011
- Safari =>не работает
Это решение не очень полезно, если прокрутка находится на теге body , потому что, как упоминалось выше, в этом случае мы можем «trust» атрибут dir . Я поместил его здесь, потому что он, вероятно, может быть адаптирован для прокрутки на теге html .
