Как убрать полосу прокрутки с сайта, но оставить возможность прокрутки
Добрый день, уважаемые друзья!
Если Вы хотите убрать полосу прокрутки с сайта и оставить возможность прокручивания страницы, то эта короткая статья для Вас.
Казалось бы, элементарный технический нюанс, иногда встречающийся при создании сайтов. Однако, порывшись в поисковиках, был удивлён, что не нашёл простого решения этого вопроса на css.
Пришлось более глубже копнуть, и на данный момент пришёл к выводу, что кроссбраузерного решения на css не существует.
В основном, все кроссбраузерные способы сводятся либо к изменению архитектурной конструкции HTML, либо же к использованию JavaScript.
Упорядочив информацию, привожу ниже в все три способа скрытия полосы прокрутки: на CSS, с помощью HTML конструкций и с помощью JavaScript.
1-ый способ (css):
Ключевой момент - использование псевдоэлемента -webkit-scrollbar с шириной равной нулю.
Конструкция HTML будет иметь следующий вид:
<div class="sposob-1"> <div class="sposob-1-inside">Контент...</div> </div>
CSS стили будут иметь следующий вид:
.sposob-1 { width: 250px; height: 342px; margin: 0 25px; overflow-x: hidden; overflow-y: scroll; } .sposob-1-inside { width: 100%; margin: 0 0px; background: #008C00; } .sposob-1::-webkit-scrollbar {width:0px;}
Первый способ скрытия полосы прокрутки будет работать только для браузеров на движке WebKit.
2-ой способ (HTML+CSS):
Ключевой момент - ширину внутреннего контейнера задаём больше на 20px относительно внешнего контейнера, что примерно равно ширине полосы прокрутки.
Конструкция HTML будет иметь следующий вид:
<div class="sposob-2"> <div class="sposob-2-outside"> <div class="sposob-2-inside"> Контент... </div> </div> </div>
CSS стили будут иметь следующий вид:
.sposob-2 { width: 250px; height: 342px; margin: 0 25px; overflow: hidden; } .sposob-2-outside { width: 270px; height: 100%; padding-right: 0px; overflow-x: hidden; overflow-y: scroll; } .sposob-2-inside { width: 100%; margin: 0 0px; padding-right: 17px; background: #FF7621; }
Говоря о скрытии скроллбара с помощью HTML-конструкций необходимо донести читателю, что кроме вышеприведённого способа, в котором полоса прокрутки скрывается за счёт увеличения свойства width относительно внешнего контейнера, существуют и другие подходы. Это и увеличение горизонтальных отступов и изменение свойств позиционирования и возможно другие. Здесь уже как мысль развернётся.
3-ий способ (JavaScript):
Ключевой момент - с помощью js-скрипта задаём правый отступ (padding-Right) внутреннего контейнера, что бы увеличить его ширину для скрытия полосы прокрутки.
Конструкция HTML будет иметь следующий вид:
<div class="sposob-3" id="spb-1"> <div class="sposob-3-inside" id="spb-2"> Контент... </div> </div>
CSS стили будут иметь следующий вид:
.sposob-3 { width: 250px; height: 342px; margin: 0 25px; overflow: hidden; } .sposob-3-inside { width: 100%; height: 100%; overflow: auto; padding-right: 0px; background: #FFE100; }
JavaScript код будет следующим:
var parent = document.getElementById('spb-1'); var child = document.getElementById('spb-2'); child.style.paddingRight = child.offsetWidth - child.clientWidth + "px";
Третий способ - это по сути второй, только в данном случае мы увеличиваем ширину внутреннего контейнера относительно внешнего за счёт задания правого внутреннего отступа (padding-Right) с помощью js-скрипта.
Демо здесь.
Исходники: скачать.
Спасибо, Вы очень помогли! Использовал первый пример.
Пожалуйста. Если есть какие-либо вопросы, - обращайтесь:)
Первый способ в FireFox не работает
Конечно не работает, ведь первый способ будет работать только для браузеров на движке WebKit. В статье так и написано.
А FireFox использует движёк Gecko.
body::-webkit-scrollbar {
width:0px;
}