БЛОГ

Как убрать полосу прокрутки с сайта, но оставить возможность прокрутки

Добрый день, уважаемые друзья!

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

Казалось бы, элементарный технический нюанс, иногда встречающийся при создании сайтов. Однако, порывшись в поисковиках, был удивлён, что не нашёл простого решения этого вопроса на 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-скрипта.

Демо здесь.
Исходники: скачать.

Сергей
Положительная заметка. Второй способ универсален и его легко применять.
Ответить | Ответить с цитатой
31.12.2016 18:36
Илья
Спасибо, Вы очень помогли! Использовал первый пример.
Ответить | Ответить с цитатой
11.09.2017 10:12
Анатолий
Цитирую Илья:
Спасибо, Вы очень помогли! Использовал первый пример.

Пожалуйста. Если есть какие-либо вопросы, - обращайтесь:)
Ответить | Ответить с цитатой
11.09.2017 23:06
Александр
Первый способ в FireFox не работает
Ответить | Ответить с цитатой
16.11.2017 13:11
Анатолий
Цитирую Александр:
Первый способ в FireFox не работает

Конечно не работает, ведь первый способ будет работать только для браузеров на движке WebKit. В статье так и написано.
А FireFox использует движёк Gecko.
Ответить | Ответить с цитатой
17.11.2017 01:12
Цифровой
Когда уже браузеры придут к какому-то единообразию? К стандарту какому-то что ли... mad mad mad
Ответить | Ответить с цитатой
19.12.2017 11:15
StevenKet
Нужно скрыть полосу прокрутки, но возможность прокрутки (например, с помощью колеса мышки оставить). Или можт как то сделать scrollbar прозрачным?
Ответить | Ответить с цитатой
08.08.2019 22:54
Анатолий
Скачайте исходники и там уже поэксперементируйте со стилями.
Ответить | Ответить с цитатой
25.08.2019 09:39
олег
Попробовал сделать данную фичу (3-й способ) у себя на сайте (у меня есть закрепленные header и footer). Но теперь когда я навожу мышкой на шапку которая имеет position:fixed; скролл не реагирует. Как пофиксить?
Ответить | Ответить с цитатой
09.09.2019 17:34
user
Большое спасибо, помог первый вариант, но думаю, его можно упростить, привязав ко всей странице:

body::-webkit-scrollbar {
width:0px;
}
Ответить | Ответить с цитатой
27.11.2021 00:20

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


ОБРАТНЫЙ ЗВОНОК
Заполните форму и наш менеджер Вам перезвонит