Как скрыть scrollbar css

Overflow scroll скрыть скролл – Css убрать скролл но оставить прокрутку. Как убрать полосы прокрутки. Скрыть полосу прокрутки, но при этом все еще можно прокручивать

Как скрыть полосы прокрутки

Метод основан на использовании CSS свойства overflow, которое определяет, как будет отображаться содержимое блочной структуры, если оно (содержимое) превышает размеры родительского элемента.

Из всех возможных значений данного свойства нас интересует значение «hidden»:

которое задает браузеру инструкцию «отобразить поместившийся контент, что не влезло – скрыть»

Применив это свойство к селектору body или html можно добиться исчезновения полос прокрутки.

Как видим, у нас есть девственно-чистая страница высотой 2800px с полосой вертикального скролла. Теперь добавим в каскадную таблицу стилей строчку:

и обновим страничку.

Также можно применять свойства overflow-y (overflow-x) для управления отображением не вместившегося контента только по вертикали (горизонтали). Т.е., исходя из рассматриваемого контекста, можно скрыть только вертикальную (горизонтальную) полосу прокрутки.

  1. CSS не скрывает полосы прокрутки, а всего лишь создает браузеру условия, при которых нет необходимости их выводить. Это значит, что вместе с скролл-барами у вас пропадет и скролл-функция, и «не вмещающийся контент» будет недоступен для просмотра!
  2. Перед использованием данного приема, хорошо подумайте – нужен ли вам он вообще. Ведь маленький недочет и можно потерять полезную информацию из поля зрения.
  • Вывод маленькой страницы, которая априори поместится полностью на экране (например, страницы ошибки, страницы авторизации и т.д. ).
  • Вывод небольших web-форм
  • Скрытие полос прокрутки при создании собственного каcтомного скролл-бара.
Послесловие

Чаще всего к этой теме web-мастера приходят тогда, когда яркий авторский дизайн сайта сходит на ноль из-за «приевшегося» стандартного вида системного скролл-бара. Да, бывает и такое. В таком случае, существует несколько вариантов решения проблемы:

Кастомизовать системные полосы прокрутки.
На сегодняшний день более-менее гибкую настройку позволяют выполнять браузеры на базе webkit.

В нашем распоряжении есть достаточно широкий набор псевдоэлементов, отвечающих за структурные части скролл-баров, и псевдоселекторов, помогающих кастомизировать внешний вид структурных частей в различных состояниях.

Преимущества:

  • Системный скролл гораздо производительнее JavaScript-симуляторов, реализует все «фишки» операционной системы устройства, сохраняется кросс-платформенность.
  • Нет никаких гарантий, что браузеры на других (не webkit) движках смогут осознать всю «тонкость душевной организации» вашего сайта (кастомизация скорее всего не произойдет).

Скрыть системные полосы прокрутки, и использовать JavaScript-эмулятор.
Казалось бы, вполне логично: хочешь кросс-браузерности – используй JavaScript. Но в данном случае это жестокое заблуждение.

Дело в том, что в этом случае JavaScript приходится обрабатывать системные события связанные со скроллом. А интерфейс этих событий значительно отличается для каждого браузера, не говоря уже о разных платформах. Учтите эту информацию при использовании «готовых» j-скроллеров (особенно, когда на странице источника заявляют о полной «кросс» без подтверждения).

Преимущества

  • Безграничная по глубине кастомизация.
  • Производительность эмулятора ниже производительности системной прокрутки.
  • Нет гарантий кросс-браузерности и кросс-платформности.

Тема авторского универсального скролла будет более подробно рассмотрена в отдельной статье. Успешных Вам проектов.

Оценок: 13 (средняя 4 из 5)

  • 22170 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Css убрать скролл но оставить прокрутку. Как убрать полосы прокрутки. Скрыть полосу прокрутки, но при этом все еще можно прокручивать

На Земле живет свыше шести миллиардов людей. Банально! Знать всех невозможно, и это тоже банальность. Однако «Мой круг» пытается опровергнуть приведенное утверждение и выдвигает тезис, что максимальная длина цепочки для знакомства двух любых людей на Земле составляет шесть рукопожатий. Итак, главная задача «Моего круга», как ее видят создатели, — это создание социальной сети, в которой люди могут общаться по хобби, профессиональным интересам, образованию, общему прошлому. Такой широкий круг возможных интересов привлекает большое количество пользователей, дает им возможность разнообразного поиска знакомых, партнеров, работодателей и работников, просто любителей поболтать в Сети. С другой стороны, такой разброс тематических направлений делает ресурс слишком объемным, недостаточно удобным в использовании и эклектичным в сравнении, например, с LinkedIn , который ориентирован на бизнес и карьеру.

«Мой круг» построен по хорошо известному принципу, когда личные знакомые составляют первый круг участника, знакомые знакомых — второй. Самый дальний из доступных кругов — третий. Следуя утверждению организаторов ресурса о шести рукопожатиях, придется последовательно знакомиться с людьми второго, затем третьего круга, и далее до шестого. Человек на шестом рукопожатии теоретически может быть любым человеком в мире. Для регистрации достаточно указать свои имя, фамилию и электронный адрес. Можно зарегистрироваться самому, а можно получить приглашение от действующего участника. В принципе можно этими сведениями и ограничиться. Однако, если вы захотите, чтобы вас на самом деле можно было найти для общения, новой работы, обсуждения интересных тем, стоит заполнить свой профиль, содержащий довольно обширный набор сведений. В нем можно указать:

  • профессиональный портрет, причем области интересов очень просто и оригинально подбираются при наборе первых символов, что очень удобно;
  • опыт работы;

Действия пользователя полностью логируются. Так что можно не вспоминать, посылал ли ты уже приглашение в свой круг или ответ на какую-нибудь тему. Достаточно войти в «Журнал действий», чтобы просмотреть архив своих активностей. Для особо активных пользователей сам архив разделен на закладки «Все», «Приглашения», «Вакансии» и «Другое». На последней закладке отображаются «наиболее значимые действия пользователя». Однако что к ним относится, не объясняется. Наверное, это знают старые опытные пользователи, которые уже совершили «значимые действия».

Какие круги могут стать моими

Сервис «Мой круг» многогранен. Его круги расположены в разных плоскостях. Есть круги профессиональные. Пользователь выбирает интересующие его тематики и становится доступен для коллег. И наоборот, перейдя в раздел по своему направлению, можно просмотреть, кто же еще находится в круге ваших профессиональных интересов. По каждому профессиональному кругу поддерживается свой форум. Однако краткий обзор даже наиболее популярных разделов показывает, что интенсивность обмена сообщениями в форуме небольшая. Так, на верхних строчках зачастую показаны сообщения вчерашние и даже двухдневной давности. Такая неторопливость отчасти компенсируется их содержательностью. В отличие от многих сетевых ресурсов здесь почти не встретишь ругани, бессмысленного выпячивания своего мнения и прочих малоприятных признаков участия в форуме «ради самого процесса». Очень интересная дизайнерская находка — зависимость размера шрифта темы от ее популярности. Например, самый популярный раздел «Музыка» отображается шрифтом 20 кеглей. Следующие по популярности — «Програм

Как убрать полосу прокрутки в любом браузере [+ВИДЕО]

Наверняка, большинство пользователей даже не замечает один очень древний, некрасивый, почти бесполезный, но постоянно занимающий при этом кусочек пространства в рабочем окне любого обозревателя сети Интернет, элемент интерфейса — вертикальную полосу прокрутки страницы.

Этот рудимент кочует по версиям и программам от разных производителей многие годы, практически без изменений, а ведь его можно легко и быстро скрыть или сделать современным, практичным, удобным, оригинальным…

Скрываем полосу прокрутки в популярных браузерах

Ниже расскажу и покажу, как убрать полосу прокрутки в любом браузере. При этом, в одном обозревательном движке это дело скроется совсем, а в другом (самом популярном), невзрачная и ворующая полезное пространство полоска с ползунком научится интеллектуально, когда надо, уменьшаться или увеличиваться в размерах, а также, исчезать полностью.

Данный материал категорически не рекомендуется владельцам компьютерных мышек без колёсика или сенсорного элемента для скролла, а также просто любителям постоянно теребить курсором ползунок прокрутки интернет-страницы.

Как убрать полосу прокрутки в Mozilla Firefox

Данный способ применим к абсолютно всем клонам этого, когда-то очень популярного и удобного обозревателя сети. К сожалению, скрытие полосы прокрутки в нём возможно только с помощью дополнений и исключительно полностью (если ошибаюсь — поправьте меня в комментариях).

Идём в дополнения Mozilla Firefox…

…и в поисковую строку открывшейся страницы…

driverhubdriverhubЧитайте также на сайте:
operaoperaпоиск дополнений Mozilla Firefoxпоиск дополнений Mozilla Firefox

…вбиваем (копи-пастим со строки ниже) название дополнения для скрытия вертикальной полосы прокрутки в Mozilla Firefox…

hide-scrollbars

Тыкаем «Enter» на любимой клавиатуре и получаем результат поиска в фирменном магазине дополнений…

Как видите, наша цель на первом месте, но дополнение «Scrolantana» абсолютно идентично «hide-scrollbars» — точно также полностью убирает полосу прокрутки с наших глаз. Каким воспользоваться — решайте сами (устанавливал их оба, но почему-то остановился на первом, как и 1279 пользователей).

Теперь в Вашем браузере Mozilla Firefox (и во всех его клонах) совсем нет вертикальной полосы прокрутки справа и рабочее пространство на капельку увеличилось (мелочь, а приятно)…

Вернуть скроллбар можно только методом отключения выбранного для использования дополнения.

Как убрать полосу прокрутки в Google Chrome

Гораздо интереснее получается история с полосой прокрутки в самом популярном и производительном (на данный момент времени) браузере — каких-либо расширений или плагинов для скрытия этого дела не нужно в нём задействовать.

Более того, ползунок скроллбара в Хроме не просто скрывается на постоянной основе, как у менее продвинутого коллеги, а приобретает вид тонкой и стильной полоски при движении страницы, которая расширяется при наведении курсора на неё. Полностью исчезает полоса прокрутки в Google Chrome лишь при остановке страницы в одном положении.

Не знаю, поняли моё описание выше или нет, но точно Вам понравится современный и практичный вид обновлённого с помощью встроенной скрытой функции древнего элемента интерфейса. Это из разряда «словами не передать — надо видеть».

Все подражатели (клоны), которым не счесть числа, обозревателя от корпорации Google (точнее, которые на одном с ним движке работают) имеют встроенную возможность (экспериментальную функцию) для изменения вида самой идеологии многократно упомянутой выше полоски, что справа живёт в окне браузера.

Всё очень легко и просто — печатаем адрес в (омнибокс) адресную строку (копируем и вставляем из строки ниже)…

chrome://flags/

…и тыкаем «Enter» на клавиатуре — попадаем в секретный раздел браузера Google Chrome, в котором нужно воспользоваться поисковой строкой…

Прописываем в неё (копируем и вставляем из строки ниже) такой параметр…

Overlay Scrollbars

…и сразу (без тыканья кнопок на клавиатуре) получаем результат…

Активируем первый пункт…

…и применяем изменения (перезапускаем обозреватель)…

Слышу восхищённые возгласы и хлопки в ладоши — значит не зря тыкал эти буковки на клавиатуре сегодня. Рад, что Вам понравилась обновлённая фишка браузера от «корпорации добра», которая теперь выглядит стильно и модно, при этом освобождает несколько пикселей в окне программы для полезного контента.

Как писал выше — почитатели и пользователи обозревателей Opera и Яндекс.Браузера точно таким же методом могут осовременить свою полосу прокрутки.

Что касается самого распространённого… средства для скачивания нормальных браузеров под названием Microsoft Edge, то вполне ожидаемо скрыть или вообще, что-либо сделать с данным элементом интерфейса в нём невозможно (может ситуация изменится с официальным выходом в свет версии программы на базе Chromium).

Краткий итог

  1. В своём стандартном виде полоса прокрутки в любом браузере имеет печальный старинный вид и требует скрытия (модификации).
  2. Убрать полосу прокрутки в Mozilla Firefox полностью можно с помощью дополнений «hide-scrollbars» или «Scrolantana».
  3. Модифицировать и заметно осовременить скроллбар в Google Chrome можно с помощью экспериментальной функции «Overlay Scrollbars».
  4. Microsoft Edge в топку!

До новых полезных компьютерных программ и интересных приложений для Андроид.

ПОЛЕЗНОЕ ВИДЕО

Рекомендую ещё посмотреть обзоры…

Я только обозреваю программы! Любые претензии — к их производителям!

Ссылки в комментариях публикуются после модерации.

Как скрыть конкретную полосу прокрутки? [Дубликат]

Если вы хотите, чтобы прокрутка работала, перед тем, как скрывать полосы прокрутки, подумайте о том, чтобы имитировать их. Современные версии OS X и мобильных ОС имеют полосы прокрутки, которые, хотя и непрактичны для захвата мышью, довольно красивы и нейтральны.

Чтобы скрыть полосы прокрутки, используется метод Джона Курлака за исключением того, что пользователи Firefox, у которых нет сенсорных панелей, не имеют возможности прокручивать, если у них нет мыши с колесом, что они, вероятно, делают, но даже тогда они обычно могут прокручивать только вертикально.

Техника Джона использует три элемента:

  • Внешний элемент для маскировки полос прокрутки.
  • Средний элемент для полос прокрутки.
  • И элемент содержимого для обоих установите размер среднего элемента и сделайте его полосками прокрутки.

Должно быть возможно установить размер внешнего и содержимого элементов одинаково, что исключает использование процентов, но я не могу подумайте о чем-нибудь еще, что не будет работать с правильной настройкой.

Моя самая большая проблема заключается в том, устанавливают ли все версии браузеров полосы прокрутки для отображения видимого переполненного содержимого v isible. Я тестировал в текущих браузерах, но не старше.

Простите мой SASS ; P

Тестирование

ОС X равно 10.6.8. Windows — Windows 7.

  • Firefox 32.0 Скрытые полосы скрыты. Клавиши со стрелками не прокручиваются, даже после нажатия на фокусировку, но колесико мыши и два пальца на трекпаде. OS X и Windows.
  • Chrome 37.0 Скроллинг скрыт. Клавиши со стрелками работают после нажатия на фокус. Работа колесика мыши и трекпада. OS X и Windows.
  • Скрытые полосы браузера Internet Explorer 11. Клавиши со стрелками работают после нажатия на фокус. Колесо мыши работает. Windows.
  • Safari 5.1.10 Скроллинг скрыт. Клавиши со стрелками работают после нажатия на фокус. Работа колесика мыши и трекпада. OS X.
  • Android 4.4.4 и 4.1.2. Полосы прокрутки скрыты. Нажмите прокрутку. Пробовал в Chrome 37.0, Firefox 32.0 и HTMLViewer в 4.4.4 (что бы это ни было). В HTMLViewer страница представляет собой размер маскированного контента и может также прокручиваться! Скроллинг взаимодействует с масштабированием страницы.

ответ дан Seth W. Klein 21 August 2018 в 19:28

Как убрать полосы прокрутки? | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 6.0+ 1.0+ 1.0+ 1.0+ 1.0+
Задача

Убрать горизонтальные или вертикальные полосы прокрутки со страницы, не зависимо от объёма страницы.

Решение

Перед тем как убрать полосы прокрутки с веб-страницы, подумайте, действительно ли вам это так необходимо. Отсутствие возможности прокрутки содержимого документа создает трудности посетителям сайта для просмотра информации. Если же существует острая необходимость построения дизайнерских изысков или желание создать своим читателям трудности, то вперед. Но вас предупреждали!

Способ основан на использовании свойства overflow, которое добавляется к селектору HTML, как показано в примере 1.

Пример 1. Страница без полос прокрутки

В данном примере используется значение hidden, которое «обрезает» весь контент выходящий за рамки элемента.

Также можно использовать свойство overflow-x, чтобы скрыть только горизонтальную полосу прокрутки и overflow-y — для сокрытия вертикальной полосы. В примере 2 показано добавление слоя с минимальной шириной 800 пикселов. При уменьшении окна браузера до этой величины, слой перестаёт менять свои размеры и появляется горизонтальная полоса прокрутки. С помощью свойства overflow-x полосы прокрутки скрываются.

Пример 2. Нет горизонтальной полосы прокрутки

Свойства overflow-x и overflow-y входят в спецификацию CSS3 и не проходят валидацию при проверке стилей на CSS2.1.

Как убрать полосу прокрутки с помощью CSS

Если у вас возникла необходимость убрать полосу прокрутки на сайте, есть легкий способ это реализовать с помощью CSS свойства.
В этой статье я расскажу, как на сайте убрать горизонтальную и вертикальную полосу прокрутки.

Как убрать горизонтальную полосу прокрутки

Итак, допустим, вы имеете вот такой сайт, где есть горизонтальная полоса прокрутки и вертикальная

Как убрать горизонтальную полосу прокрутки

Но вам необходимо убрать только горизонтальную полосу прокрутки.

Как убрать горизонтальную полосу прокрутки

Для этого открывайте свой файл со CSS стилями и добавляйте свойство overflow-x к селектору «html» или к «body»

Как убрать горизонтальную полосу прокрутки

Как убрать вертикальную полосу прокрутки

Допустим, вам уже необходимо убрать только вертикальную полосу прокрутки.

Как убрать вертикальную полосу прокрутки

Для этого открывайте свой файл с CSS стилями и добавляйте свойство overflow-y к селектору «html» или к «body»

Как убрать вертикальную полосу прокрутки

Как убрать горизонтальную и вертикальную полосу прокрутки

Допустим, вам необходимо убрать вертикальную и горизонтальную полосу прокрутки.

Как убрать горизонтальную и вертикальную полосу прокрутки

Для этого открывайте свой файл с CSS стилями и добавьте свойство overflow к селектору «html» или к «body»

или же добавьте свойство overflow-x и overflow-y к селектору «html» или к «body»:

Как убрать горизонтальную и вертикальную полосу прокрутки

Как и обещал – ничего сложно здесь не было.
Внимание, прежде чем убирать полосу прокрутки, подумайте, действительно ли вам это нужно.

How TO — Hide Scrollbar

Add overflow: hidden; to hide both the horizontal and vertical scrollbar.

Example

To only hide the vertical scrollbar, or only the horizontal scrollbar, use overflow-y or overflow-x :

Example

Note that overflow: hidden will also remove the functionality of the scrollbar. It is not possible to scroll inside the page.

Tip: To learn more about the overflow property, go to our CSS Overflow Tutorial or CSS overflow Property Reference.

Hide Scrollbars But Keep Functionality

To hide the scrollbars, but still be able to keep scrolling, you can use the following code:

Example

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar <
display: none;
>

/* Hide scrollbar for IE, Edge and Firefox */
.example <
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
>

Webkit browsers, such as Chrome, Safari and Opera, supports the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser’s scrollbar. IE and Edge supports the -ms-overflow-style: property, and Firefox supports the scrollbar-width property, which allows us to hide the scrollbar, but keep functionality.

Скрытие полосы прокрутки на HTML-странице

Можно ли использовать CSS, чтобы скрыть полосу прокрутки? Как бы ты это сделал?

19 ответов

Установите overflow: hidden; в теге body следующим образом:

Приведенный выше код скрывает как горизонтальную, так и вертикальную полосу прокрутки.

Если вы хотите скрыть только вертикальную полосу прокрутки , используйте overflow-y :

А если вы хотите скрыть только горизонтальную полосу прокрутки , используйте overflow-x :

Примечание. Это также отключит функцию прокрутки. Обратитесь к ответам ниже, если вы просто хотите скрыть полосу прокрутки, но не функцию прокрутки.

WebKit поддерживает псевдоэлементы полосы прокрутки, которые можно скрыть с помощью стандартных правил CSS:

Если вы хотите, чтобы все полосы прокрутки были скрыты, используйте

Я не уверен насчет восстановления — это сработало, но может быть правильный способ сделать это:

Конечно, вы всегда можете использовать width: 0 , который затем можно легко восстановить с помощью width: auto , но я не сторонник злоупотребления width для настройки видимости.

Firefox 64 теперь поддерживает экспериментальное свойство ширины полосы прокрутки по по умолчанию (63 требует установки флага конфигурации). Чтобы скрыть полосу прокрутки в Firefox 64:

Чтобы узнать, поддерживает ли ваш текущий браузер псевдоэлемент или scrollbar-width , попробуйте этот фрагмент:

(Обратите внимание, что это не совсем правильный ответ на вопрос, потому что он также скрывает горизонтальные полосы, но это то, что я искал, когда Google указал мне сюда, поэтому я решил, что все равно опубликую его.)

Да вроде ..

Когда вы задаете вопрос «Можно ли каким-либо образом удалить полосы прокрутки в браузере, а не просто скрыть или замаскировать», все ответят «Невозможно», потому что невозможно удалить полосы прокрутки из всех браузеров совместимым и кросс-совместимым способом, а затем есть весь аргумент в пользу удобства использования.

Однако можно запретить браузеру когда-либо создавать и отображать полосы прокрутки, если вы не позволяете своей веб-странице переполняться.

Это просто означает, что мы должны проактивно заменить то же поведение, которое браузер обычно делает для нас, и сказать браузеру спасибо, но не спасибо, приятель. Вместо того, чтобы пытаться удалить полосы прокрутки (что, как мы все знаем, невозможно), мы можем избежать прокрутки (что вполне возможно) и прокручивать элементы, которые мы создаем и над которыми мы больше контролируем.

Создайте div со скрытым переполнением. Обнаруживать, когда пользователь пытается прокрутить, но не может, потому что мы отключили возможность браузеров прокручивать с помощью overflow: hidden .. и вместо этого перемещать контент вверх с помощью JavaScript, когда это происходит. Тем самым создавая нашу собственную прокрутку без прокрутки по умолчанию в браузере или используйте плагин, например iScroll.

Из соображений тщательности; все специфические для поставщика способы управления полосами прокрутки:

Internet Explorer 5.5+

* Эти свойства никогда не входили в спецификацию CSS, не утверждались и не указывались поставщиком, но они работают в Internet Explorer и Konqueror. Их также можно установить локально в пользовательской таблице стилей для каждого приложения. В Internet Explorer вы найдете его на вкладке «Специальные возможности», в Konqueror — на вкладке «Таблицы стилей».

Начиная с Internet Explorer 8, эти свойства имели префикс поставщика от Microsoft, но они все еще не были одобрены W3C. .

Дополнительные сведения об Internet Explorer

Internet Explorer делает доступным scroll , который устанавливает, следует ли включать или отключать полосы прокрутки; его также можно использовать для получения значения положения полос прокрутки.

В Microsoft Internet Explorer 6 и более поздних версиях, когда вы используете объявление !DOCTYPE для указания режима, совместимого со стандартами, этот атрибут применяется к элементу HTML. Если режим, соответствующий стандартам, не указан, как в более ранних версиях Internet Explorer, этот атрибут применяется к элементу BODY , а НЕ к элементу HTML .

Также стоит отметить, что при работе с .NET класс ScrollBar в System.Windows.Controls.Primitives в среде презентаций отвечает за отображение полос прокрутки.

WebKit

Расширения WebKit, связанные с настройкой полосы прокрутки:

Enter image description here

Каждый из них может быть объединен с дополнительными псевдоселекторами:

  • :horizontal — горизонтальный псевдокласс применяется к любым частям полосы прокрутки, которые имеют горизонтальную ориентацию.
  • :vertical — вертикальный псевдокласс применяется к любым частям полосы прокрутки, которые имеют вертикальную ориентацию.
  • :decrement — псевдокласс декремента применяется к кнопкам и фрагментам дорожки. Он указывает, будет ли кнопка или фрагмент дорожки уменьшать позицию представления при использовании (например, вверх на вертикальной полосе прокрутки, влево на горизонтальной полосе прокрутки).
  • :increment — Псевдокласс приращения применяется к кнопкам и элементам дорожки. Он указывает, будет ли кнопка или фрагмент дорожки увеличивать позицию представления при использовании (например, вниз на вертикальной полосе прокрутки, прямо на горизонтальной полосе прокрутки).
  • :start — начальный псевдокласс применяется к кнопкам и элементам дорожки. Он указывает, находится ли объект перед большим пальцем.
  • :end — конечный псевдокласс применяется к кнопкам и элементам дорожки. Он указывает, находится ли объект после большого пальца.
  • :double-button — псевдокласс двойной кнопки применяется к кнопкам и фрагментам дорожки. Он используется для определения того, является ли кнопка частью пары кнопок, которые вместе находятся на одном конце полосы прокрутки. Для элементов дорожки это указывает, упирается ли элемент дорожки в пару кнопок.
  • :single-button — Псевдокласс для одной кнопки применяется к кнопкам и фрагментам дорожки. Он используется для определения того, находится ли кнопка сама по себе в конце полосы прокрутки. Для фрагментов дорожки это указывает, упирается ли фрагмент дорожки в одноэлементную кнопку.
  • :no-button — применяется к фрагментам дорожки и указывает, доходит ли фрагмент дорожки до края полосы прокрутки, т.е. на этом конце дорожки нет кнопки.
  • :corner-present — применяется ко всем частям полосы прокрутки и указывает, присутствует ли угол полосы прокрутки.
  • :window-inactive — применяется ко всем частям полосы прокрутки и указывает, активно ли в данный момент окно, содержащее полосу прокрутки. (В последних ночных сборниках этот псевдокласс теперь применяется и к :: selection. Мы планируем расширить его для работы с любым контентом и предложить его в качестве нового стандартного псевдокласса.)

Примеры этих комбинаций

Дополнительные сведения о Chrome

addWindowScrollHandler общедоступный статический HandlerRegistration addWindowScrollHandler (обработчик Window.ScrollHandler)

Добавляет обработчик Window.ScrollEvent Параметры: handler — обработчик Возврат: возвращает регистрацию обработчика [ источник ] (http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html#addWindowScrollHandler (com.google .gwt.user.client.Window.ScrollHandler) )

Mozilla

В Mozilla есть некоторые расширения для управления полосами прокрутки, но все они не рекомендуется использовать.

  • -moz-scrollbars-none Они рекомендуют использовать overflow: hidden вместо этого.
  • -moz-scrollbars-horizontal Аналогично overflow-x
  • -moz-scrollbars-vertical Подобно overflow-y

-moz-hidden-unscrollable Работает только внутри в настройках профиля пользователя. Отключает прокрутку корневых элементов XML и отключает использование клавиш со стрелками и колесика мыши для прокрутки веб-страниц.

Дополнительные сведения о Mozilla

Насколько я знаю, это не очень полезно, но стоит отметить, что атрибут, который определяет, отображаются ли полосы прокрутки в Firefox, имеет вид (ссылка на ссылку):

  • Атрибут: полосы прокрутки.
  • Тип: nsIDOMBarProp
  • Описание: объект, который определяет, отображаются ли полосы прокрутки в окне. Этот атрибут "заменяемый" в JavaScript. Только чтение

И последнее, но не менее важное: обивка похожа на волшебство.

Как уже упоминалось ранее в некоторых других ответах, вот иллюстрация, которая достаточно понятна.

Урок истории

Scroll bars

Просто потому, что мне любопытно, я хотел узнать о происхождении полос прокрутки, и это лучшие ссылки, которые я нашел.

Разнообразный

Объект scrollbar BarProp является дочерним по отношению к объекту window и представляет элемент пользовательского интерфейса, который содержит механизм прокрутки или некоторую аналогичную концепцию интерфейса. window.scrollbars.visible вернет true , если полосы прокрутки видны.

History API также включает функции для восстановления прокрутки при навигации по страницам, чтобы сохранить положение прокрутки при загрузке страницы.

window.history.scrollRestoration можно использовать для проверки статуса восстановления прокрутки или изменения его статуса (добавление ="auto"/"manual" . Авто — значение по умолчанию. Изменение его на ручной означает, что вы, как разработчик, будете владеть любыми изменениями прокрутки, которые может потребоваться, когда пользователь просматривает историю приложения. При необходимости вы можете отслеживать положение прокрутки при отправке записей истории с помощью history.pushState ().

Дальнейшее чтение:

Примеры

Вы можете сделать это с помощью оболочки div , переполнение которой скрыто, а для внутреннего div установлено значение auto .

Чтобы удалить внутреннюю полосу прокрутки div , вы можете вытащить ее из окна просмотра внешнего div , применив отрицательное поле к внутреннему div . Затем примените равные отступы к внутреннему div, чтобы содержимое оставалось на виду.

У меня это работает с простыми свойствами CSS:

Для более старых версий Firefox используйте: overflow: -moz-scrollbars-none;

Думаю, я нашел для вас обходной путь, если вам все еще интересно. Это моя первая неделя, но у меня все получилось .

Если вы ищете решение для скрытия полосы прокрутки для мобильных устройств, следуйте Ответ Петра!

Вот jsfiddle, который использует решение ниже, чтобы скрыть горизонтальную полосу прокрутки.

Он был протестирован на планшете Samsung с Android 4.0.4 (Ice Cream Sandwich, как в собственном браузере, так и в Chrome) и на iPad с iOS 6 (как в Safari, так и в Chrome).

Как уже говорили другие люди, используйте CSS overflow .

Но если вы по-прежнему хотите, чтобы пользователь мог прокручивать этот контент (без видимой полосы прокрутки), вы должны использовать JavaScript.

В дополнение к ответу Петра:

Это будет работать так же для Internet Explorer 10:

Кроссбраузерный подход к скрытию полосы прокрутки.

Он был протестирован в Edge, Chrome, Firefox и Safari.

Скрыть полосу прокрутки, сохранив возможность прокрутки колесиком мыши!

Если вы хотите, чтобы прокрутка работала, прежде чем скрывать полосы прокрутки, подумайте о их стилизации. Современные версии OS X и мобильных ОС имеют полосы прокрутки, которые непрактичны для использования мышью, но довольно красивы и нейтральны.

Чтобы скрыть полосы прокрутки, метод Джона Курлака работает хорошо, за исключением оставления Пользователи Firefox, у которых нет сенсорных панелей, не имеют возможности прокручивать, если они не у них есть мышь с колесиком, что они, вероятно, и делают, но даже тогда они обычно могут прокручивайте только по вертикали.

В технике Джона используются три элемента:

  • Внешний элемент для маскировки полос прокрутки.
  • Средний элемент для полос прокрутки.
  • И элемент содержимого, чтобы установить размер среднего элемента и сделать его полосами прокрутки.

Должна быть возможность установить одинаковый размер внешних элементов и элементов содержимого, что исключает использование процентов, но я не могу придумать ничего другого, что не сработало бы при правильной настройке.

Меня больше всего беспокоит, устанавливают ли все версии браузеров полосы прокрутки, чтобы сделать видимым переполненный контент. Я тестировал текущие браузеры, но не старые.

Простите мой SASS; P

Тестирование

OS X — это 10.6.8. Windows — это Windows 7.

  • Firefox 32.0 Полосы прокрутки скрыты. Клавиши со стрелками не прокручиваются даже после щелчка для фокусировки, но колесо мыши и два пальца на трекпаде делают. OS X и Windows.
  • Полосы прокрутки Chrome 37.0 скрыты. Клавиши со стрелками работают после щелчка для фокусировки. Колесико мыши и трекпад работают. OS X и Windows.
  • Полосы прокрутки Internet Explorer 11 скрыты. Клавиши со стрелками работают после щелчка для фокусировки. Колесико мыши работает. Windows.
  • Safari 5.1.10 Полосы прокрутки скрыты. Клавиши со стрелками работают после щелчка для фокусировки. Колесико мыши и трекпад работают. OS X.
  • Android 4.4.4 и 4.1.2. Полосы прокрутки скрыты. Сенсорная прокрутка работает. Пробовал в Chrome 37.0, Firefox 32.0 и HTMLViewer на 4.4.4 (что бы там ни было). В HTMLViewer размер страницы равен размеру замаскированного содержимого, и ее тоже можно прокручивать! Прокрутка приемлемо взаимодействует с масштабированием страницы.

Я просто подумал, что хочу указать всем, кто читает этот вопрос, что установка overflow: hidden (или overflow-y) в элементе body не скрывала для меня полосы прокрутки.

Мне пришлось использовать элемент html .

Скопируйте этот код CSS в код клиента, чтобы скрыть полосу прокрутки:

Я написал версию WebKit с некоторыми параметрами, такими как автоматически скрывать , маленькая версия , только-y или только-x :

Чтобы отключить вертикальную полосу прокрутки, просто добавьте overflow-y:hidden; .

Подробнее об этом: overflow.

Мой ответ будет прокручиваться, даже когда overflow:hidden; , используя jQuery:

Например, прокрутите колесико мыши по горизонтали:

Я считаю, что вы можете управлять им с помощью атрибута CSS overflow , но они имеют ограниченную поддержку браузером. Один источник сообщил, что это Internet Explorer 5 (и более поздние версии), Firefox 1.5 (и более поздние версии) и Safari 3 (и более поздние версии) — может быть, достаточно для ваших целей.

Можно ли использовать CSS, чтобы скрыть полосу прокрутки? Как бы вы это сделали?

Если вы хотите удалить вертикальные (и горизонтальные) полосы прокрутки из области просмотра браузера, добавьте:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *