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

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

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

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

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