Как убрать полосу прокрутки с сайта, но оставить возможность прокрутки
Если Вы хотите убрать полосу прокрутки с сайта и оставить возможность прокручивания страницы, то эта короткая статья для Вас.
Казалось бы, элементарный технический нюанс, иногда встречающийся при создании сайтов. Однако, порывшись в поисковиках, был удивлён, что не нашёл простого решения этого вопроса на css.
Пришлось более глубже копнуть, и на данный момент пришёл к выводу, что кроссбраузерного решения на css не существует.
В основном, все кроссбраузерные способы сводятся либо к изменению архитектурной конструкции HTML, либо же к использованию JavaScript.
Упорядочив информацию, привожу ниже в все три способа скрытия полосы прокрутки: на CSS, с помощью HTML конструкций и с помощью JavaScript.
1-ый способ (css):
Ключевой момент — использование псевдоэлемента -webkit-scrollbar с шириной равной нулю.
Конструкция HTML будет иметь следующий вид:
CSS стили будут иметь следующий вид:
Первый способ скрытия полосы прокрутки будет работать только для браузеров на движке WebKit.
2-ой способ (HTML+CSS):
Ключевой момент — ширину внутреннего контейнера задаём больше на 20px относительно внешнего контейнера, что примерно равно ширине полосы прокрутки.
Конструкция HTML будет иметь следующий вид:
CSS стили будут иметь следующий вид:
Говоря о скрытии скроллбара с помощью HTML-конструкций необходимо донести читателю, что кроме вышеприведённого способа, в котором полоса прокрутки скрывается за счёт увеличения свойства width относительно внешнего контейнера, существуют и другие подходы. Это и увеличение горизонтальных отступов и изменение свойств позиционирования и возможно другие. Здесь уже как мысль развернётся.
3-ий способ (JavaScript):
Ключевой момент — с помощью js-скрипта задаём правый отступ (padding-Right) внутреннего контейнера, что бы увеличить его ширину для скрытия полосы прокрутки.
Конструкция HTML будет иметь следующий вид:
CSS стили будут иметь следующий вид:
JavaScript код будет следующим:
Третий способ — это по сути второй, только в данном случае мы увеличиваем ширину внутреннего контейнера относительно внешнего за счёт задания правого внутреннего отступа (padding-Right) с помощью js-скрипта.
Как скрыть полосы прокрутки?
Метод основан на использовании CSS свойства overflow, которое определяет, как будет отображаться содержимое блочной структуры, если оно (содержимое) превышает размеры родительского элемента.
Из всех возможных значений данного свойства нас интересует значение «hidden»:
которое задает браузеру инструкцию «отобразить поместившийся контент, что не влезло — скрыть»
Применив это свойство к селектору body или html можно добиться исчезновения полос прокрутки.
Как видим, у нас есть девственно-чистая страница высотой 2800px с полосой вертикального скролла. Теперь добавим в каскадную таблицу стилей строчку:
и обновим страничку.
Также можно применять свойства overflow-y (overflow-x) для управления отображением не вместившегося контента только по вертикали (горизонтали). Т.е., исходя из рассматриваемого контекста, можно скрыть только вертикальную (горизонтальную) полосу прокрутки.
- CSS не скрывает полосы прокрутки, а всего лишь создает браузеру условия, при которых нет необходимости их выводить. Это значит, что вместе с скролл-барами у вас пропадет и скролл-функция, и «не вмещающийся контент» будет недоступен для просмотра!
- Перед использованием данного приема, хорошо подумайте — нужен ли вам он вообще. Ведь маленький недочет и можно потерять полезную информацию из поля зрения.
- Наиболее оправданным будет применение overflow: hidden в следующих случаях:
- Вывод маленькой страницы, которая априори поместится полностью на экране (например, страницы ошибки, страницы авторизации и т.д. ).
- Вывод небольших web-форм
- Скрытие полос прокрутки при создании собственного каcтомного скролл-бара.
Послесловие
Чаще всего к этой теме web-мастера приходят тогда, когда яркий авторский дизайн сайта сходит на ноль из-за «приевшегося» стандартного вида системного скролл-бара. Да, бывает и такое. В таком случае, существует несколько вариантов решения проблемы:
Кастомизовать системные полосы прокрутки.
На сегодняшний день более-менее гибкую настройку позволяют выполнять браузеры на базе webkit.
В нашем распоряжении есть достаточно широкий набор псевдоэлементов, отвечающих за структурные части скролл-баров, и псевдоселекторов, помогающих кастомизировать внешний вид структурных частей в различных состояниях.
Преимущества:
- Системный скролл гораздо производительнее JavaScript-симуляторов, реализует все «фишки» операционной системы устройства, сохраняется кросс-платформенность.
- Нет никаких гарантий, что браузеры на других (не webkit) движках смогут осознать всю «тонкость душевной организации» вашего сайта (кастомизация скорее всего не произойдет).
Скрыть системные полосы прокрутки, и использовать JavaScript-эмулятор.
Казалось бы, вполне логично: хочешь кросс-браузерности — используй JavaScript. Но в данном случае это жестокое заблуждение.
Дело в том, что в этом случае JavaScript приходится обрабатывать системные события связанные со скроллом. А интерфейс этих событий значительно отличается для каждого браузера, не говоря уже о разных платформах. Учтите эту информацию при использовании «готовых» j-скроллеров (особенно, когда на странице источника заявляют о полной «кросс» без подтверждения).
Преимущества
- Безграничная по глубине кастомизация.
- Производительность эмулятора ниже производительности системной прокрутки.
- Нет гарантий кросс-браузерности и кросс-платформности.
Тема авторского универсального скролла будет более подробно рассмотрена в отдельной статье. Успешных Вам проектов.
Use CSS to hide the scrollbar
There are times when we need to hide the scrollbar from the HTMl elements. The uses can vary from person to person. It is opinionated topic to keep the scrollbar or not based on User Interactions(UI)/User Experience(UX).
Most of the time, I don’t like to show the scrollbar to the user because of design practices I follow.
To achieve this, you just need to tickle with CSS to add some pseudo selectors for hiding it based on Browser’s stylings
Let’s see the default UI for scroll elements which will show the scrollbar.
We will declare a div which will contain a list of items and then we will apply some CSS to provide max-width and max-height to see the scroll behaviour.
Exit fullscreen mode
Exit fullscreen mode
Let’s see how it look in the screen
You see, browser automatically adds the scrollbar by default, but If we want to hide, we can do it.
Now, we will add some css to the element to hide the scrollbar:
We will declare a div with some other class name which will contain same number of items and then we will use the same CSS but with some extra rules to see the scroll behaviour but not see the scrollbar.
Exit fullscreen mode
Exit fullscreen mode
Let’s see, whether we achieved what we wanted or not
Here, you can see that, the scrollbar is no longer can be seen, but the functionality for scrolling remain intact.
Hope this helps you someway. Do comment your thoughts on anything, you would like to change or add.
Как спрятать scrollbar в div и отставить возможность скроллинга?
Нужно скрыть полосу прокрутки, но возможность прокрутки (например, с помощью колеса мышки оставить).
Или может как то сделать scrollbar прозрачным?
- Вопрос задан более трёх лет назад
- 180888 просмотров
Средний 1 комментарий
- Вконтакте
Вот рабочий способ:
::-webkit-scrollbar <
display: none;
>
Просто скопируйте и вставьте в самое начало! 🙂
Если делать как посоветовали выше, то пострадают мобильные браузеры. У них скролл не занимает место, как на десктопах, поэтому текст будет уходить за правую границу.