Скрол, убрать

@Gerd199 · 02.10.2019, 01:32. **Показов** 2031. **Ответов** 5

Студворк — интернет-сервис помощи студентам

На блоке есть скрол, но суть не в том чтобы его убрать совсем, а оставить только ползунок. А саму полосу убрать... Ставил бакграунд и прозрачность, не работает.

@eldenio · 02.10.2019, 03:53

Для webkit браузеров можно сделать с помощью псеводклассов
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer

Пример:

HTML:

HTML5
1
2
3
4
5
6
<div>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis beatae necessitatibus accusantium in ex reprehenderit debitis repellat deserunt illo. Minus ipsum atque quam sed perspiciatis voluptatem perferendis laboriosam optio nemo.</p>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis beatae necessitatibus accusantium in ex reprehenderit debitis repellat deserunt illo. Minus ipsum atque quam sed perspiciatis voluptatem perferendis laboriosam optio nemo.</p>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis beatae necessitatibus accusantium in ex reprehenderit debitis repellat deserunt illo. Minus ipsum atque quam sed perspiciatis voluptatem perferendis laboriosam optio nemo.</p>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nobis beatae necessitatibus accusantium in ex reprehenderit debitis repellat deserunt illo. Minus ipsum atque quam sed perspiciatis voluptatem perferendis laboriosam optio nemo.</p>
</div>

CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div {
  display:block;
  width: 300px;
  height: 300px;
  overflow-y: srcoll;
  overflow-x: hidden;
}
 
div::-webkit-scrollbar { width: 3px; height: 3px;}
div::-webkit-scrollbar-button {  background-color: #666; }
div::-webkit-scrollbar-track {  background-color: #999;}
div::-webkit-scrollbar-track-piece { background-color: #ffffff;}
div::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
div::-webkit-scrollbar-corner { background-color: #999;}
div::-webkit-resizer { background-color: #666;}

codepen: https://codepen.io/denisgaker/pen/MWgNeRb

@Gerd199 · 02.10.2019, 04:52 **[ТС]**

Не, не выход. На одном из проектов срол сделан так, что он по верх элементов. А в данном случаи при появлении скрола все элементы прижимаются к правому краю.

@eldenio · 02.10.2019, 06:26

В смысле? Здесь скролл никак не влияет на расположение эл-тов.

Добавь для параграфа длину в 50% - убедишься.

Пример на codepen: https://codepen.io/denisgaker/pen/MWgNeRb

Или ты что-то другое имел ввиду?

@Gerd199 · 02.10.2019, 23:32 **[ТС]**

Нее, изначально скрола нет. Когда курсор на блоке, появляется и соответственно все элементы прижимаются к левому краю.

В блоке несколько дочерних, у каждого свой цвет. Сделать ползунок под свет фона неплохая идея, но только в том случаи если в блоке один фон. Тогда незаметно его, именно по пути которому ползает ползунок.

@eldenio · 03.10.2019, 19:16

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

CSS
1
2
3
4
div {padding-right: 20px;}
 
div:hover,
div:focus {padding-right: 0;}

Пример на codepen: https://codepen.io/denisgaker/pen/MWgNeRb

По поводу нескольких цветов: попробовал задать скролл-треку прозрачность - не работает. Почему - не знаю.
Может, эту задачу проще будет решить с помощью js?

Добавлено через 13 минут

Сообщение от eldenio

Если имеется ввиду ситуация, когда появившийся скролл-бар сдвигает элементы влево, можно задать блоку левый отступ, равный ширине скролл-бара, а при наведении курсор на блок этот отступ убирать.
Тогда контент никак двигаться не будет.

Забыл озвучить важный момент.
у блока обязательно должно быть остановлено свойство box-sizing со значением border-box, иначе он будет менять размеры в зависимости от наличия / отсутствия padding

CSS
1
2
3
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@Gerd199 Заблокирован

	Скрол, убрать 02.10.2019, 01:32. Показов 2031. Ответов 5 Метки нет (Все метки) На блоке есть скрол, но суть не в том чтобы его убрать совсем, а оставить только ползунок. А саму полосу убрать... Ставил бакграунд и прозрачность, не работает. 0

@Gerd199 Заблокирован
	02.10.2019, 04:52 [ТС]
	Не, не выход. На одном из проектов срол сделан так, что он по верх элементов. А в данном случаи при появлении скрола все элементы прижимаются к правому краю. 0

@eldenio 2 / 3 / 0 Регистрация: 16.07.2015 Сообщений: 30
	02.10.2019, 06:26
	В смысле? Здесь скролл никак не влияет на расположение эл-тов. Добавь для параграфа длину в 50% - убедишься. Пример на codepen: https://codepen.io/denisgaker/pen/MWgNeRb Или ты что-то другое имел ввиду? 0

@Gerd199 Заблокирован
	02.10.2019, 23:32 [ТС]
	Нее, изначально скрола нет. Когда курсор на блоке, появляется и соответственно все элементы прижимаются к левому краю. В блоке несколько дочерних, у каждого свой цвет. Сделать ползунок под свет фона неплохая идея, но только в том случаи если в блоке один фон. Тогда незаметно его, именно по пути которому ползает ползунок. 0