Как спрятать scrollbar в div и отставить возможность скроллинга?

Нужно скрыть полосу прокрутки, но возможность прокрутки (например, с помощью колеса мышки оставить).


Или может как то сделать scrollbar прозрачным?
  • Вопрос задан
  • 107936 просмотров
Пригласить эксперта
Ответы на вопрос 10
standy
@standy
Если делать как посоветовали выше, то пострадают мобильные браузеры. У них скролл не занимает место, как на десктопах, поэтому текст будет уходить за правую границу.

Есть еще одно решение:
/* хром, сафари */
.element::-webkit-scrollbar { width: 0; }

/* ie 10+ */
.element { -ms-overflow-style: none; }

/* фф (свойство больше не работает, других способов тоже нет)*/
.element { overflow: -moz-scrollbars-none; }

Отсюда: hiding-vertical-scrollbars-with-pure-css-in-chrome...
Ответ написан
DotDash
@DotDash
•••• • •−•• •−•• −−− •−− −−− •−• •−•• −•• −−••−−
Привет! Сейчас 2019 и это работает вот так:
Ответ написан
taliban
@taliban
php программист
jsfiddle.net/H8xfD/ Пользуйтесь, но при условии что ширина известна. Камент выше 100% правильный.
Ответ написан
@JerryJJ
И надеяться потом, что человек догадается о возможности прокрутки? Или свой скроллбар нарисуете?
Ответ написан
krom9ra
@krom9ra
В стиль — overflow:hidden, а события колёсика придётся самому обрабатывать.

Тут подробно расписаны другие варианты.
Ответ написан
splitface
@splitface
Что если отрицательный правый margin, и overflow:hidden у родителя.
Ответ написан
@daniel_wesson
Есть хороший вариант:
<div class="div1">
	<div class="div2">
		Тут контент
	</div>
</div>

.div1 {
	width: 300px;
	height: 500px;
	overflow: hidden;
}
.div2 {
	overflow-y: scroll;
	max-height: 100%;
	width: 100%;
	padding-right: 45px;
	background: lightpink;
}
Ответ написан
@saneq1
scrollbar-width: none; для мозилы
::-webkit-scrollbar для остальных
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы