Как убрать полосу прокрутки с сайта, но оставить возможность прокрутки
Если Вы хотите убрать полосу прокрутки с сайта и оставить возможность прокручивания страницы, то эта короткая статья для Вас.
Казалось бы, элементарный технический нюанс, иногда встречающийся при создании сайтов. Однако, порывшись в поисковиках, был удивлён, что не нашёл простого решения этого вопроса на 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-скрипта.
How to Hide the Scrollbar in CSS
Designing a website exactly how you want often requires cutting out the excess — some whitespace here, an underline there, or, in today’s case, the scrollbar.
Whether for design or functionality reasons, it’s easy to hide the scrollbar on a page or page element with a bit of CSS. There are multiple ways to do this — hiding the scrollbar while allowing scrolling, hiding it while disabling scrolling, and keeping the scrollbar hidden only until it’s needed — some of which will work better based on your case.
To meet your design needs, this guide will cover all of these methods. Let’s get started.
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.
Hide scroll bar, but while still being able to scroll
I want to be able to scroll through the whole page, but without the scrollbar being shown.
In Google Chrome it’s:
But Mozilla Firefox and Internet Explorer don’t seem to work like that.
I also tried this in CSS:
That does hide the scrollbar, but I can’t scroll any more.
Is there a way I can remove the scrollbar while still being able to scroll the whole page?
With just CSS or HTML, please.
42 Answers 42
Just a test which is working fine.
JavaScript:
Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth — Element.clientWidth , the exact scrollbar width will show up.
Using Position: absolute ,
Information:
Based on this answer, I created a simple scroll plugin.
This works for me with simple CSS properties:
For older versions of Firefox, use: overflow: -moz-scrollbars-none;
It is easy in WebKit, with optional styling:
UPDATE:
Firefox now supports hiding scrollbars with CSS, so all major browsers are now covered (Chrome, Firefox, Internet Explorer, Safari, etc.).
Simply apply the following CSS to the element you want to remove scrollbars from:
This is the least hacky cross browser solution that I’m currently aware of. Check out the demo.
ORIGINAL ANSWER:
Here’s another way that hasn’t been mentioned yet. It’s really simple and only involves two divs and CSS. No JavaScript or proprietary CSS is needed, and it works in all browsers. It doesn’t require explicitly setting the width of the container either, thus making it fluid.
This method uses a negative margin to move the scrollbar out of the parent and then the same amount of padding to push the content back to its original position. The technique works for vertical, horizontal and two way scrolling.