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

Question

[misha91]

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


Или может как то сделать scrollbar прозрачным?

Comments

[THeEmptYGoD]

Вот рабочий способ:

::-webkit-scrollbar {
display: none;
}

Просто скопируйте и вставьте в самое начало! :)

Answer 1

[Андрей]

Если делать как посоветовали выше, то пострадают мобильные браузеры. У них скролл не занимает место, как на десктопах, поэтому текст будет уходить за правую границу.

Есть еще одно решение:

/* хром, сафари */
.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...

Comments

[Сергей Сосновский]

В этом есть один косяк! пространство остается

[Сергей Сосновский]

Как думаете можно это вылечить? естественно ширина не известна(ну или высота если это горизонтальный)

[Dima Polos]

После добавления overflow: -moz-scrollbars-none; в мозиле перестает работать скролл вообще, а остальное работает хорошо) Спасибо!

[rewrer45555]

Супер! благодарю!

[GVins]

Это помогло

Answer 2

[DotDash]

Привет! Сейчас 2019 и это работает вот так:

Comments

[Капитан Какао]

от души бро!

Answer 3

[WebgeekS]

100% рабочий вариант Chrome, Safari, IE и т.д

.elem {
      overflow: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
}

.elem::-webkit-scrollbar {
      width: 0;
      height: 0;
}

Comments

[Tamara Evpraksina]

Большое спасибо за решение, всё отлично работает.

[Серж Ткач]

Рабочее решение. В моем случае также надо было добавить white-space: nowrap;

.elem {       
      overflow: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;

      white-space: nowrap;  /* предотвращает сползание элементов на следующую строку */
}

Answer 4

[roliyarnik]

вот так работает

Answer 5

[Анатолий]

jsfiddle.net/H8xfD/ Пользуйтесь, но при условии что ширина известна. Камент выше 100% правильный.

Comments

[magic4x]

Начните выделять текст и тяните вправо :)

[Oscar Handsome]

Добротный способ!

Answer 6

[JerryJJ]

И надеяться потом, что человек догадается о возможности прокрутки? Или свой скроллбар нарисуете?

Comments

[misha91]

знаю что это тупо, но такая прихоть заказчика…

[lightalex]

Иногда нужно рисовать самому)
Как мне например

[IlonMusk]

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

Answer 7

[saneq1]

scrollbar-width: none; для мозилы
::-webkit-scrollbar для остальных

Answer 8

[krom9ra]

В стиль — overflow:hidden, а события колёсика придётся самому обрабатывать.

Тут подробно расписаны другие варианты.

Comments

[krom9ra]

а вот scroobar прозрачным, как я помню, позволит сделать разве что IE и Opera. Хотя никогда не сталкивался лично, но у меня на всех посещаемых сайтах в FF скролл стандартный)

Answer 9

[Metaller]

Попробуйте www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

Answer 10

[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;
}

Comments

[AlphaDMQ]

Добавил бы box-sizing: content-box;

.div2 {
  overflow-y: scroll;
  max-height: 100%;
  width: 100%;
  padding-right: 45px;
  background: lightpink;
  box-sizing: content-box;
}

Answer 11

[splitface]

Что если отрицательный правый margin, и overflow:hidden у родителя.