Как убрать полосу прокрутки по вертикали в html

• Как убрать горизонтальную прокрутку
• Прокрутка модального окна

NMitra До появления scrollbar-gutter , можно было использовать решение с сайта aykevl.nl. Где 100vw — это ширина окна браузера с полосой прокрутки или без неё при её отсутствии.

Как стилизовать или убрать полосу прокрутки — CSS скроллбар

Стилизованные полосы прокрутки становятся популярными, думаю, вы уже сталкивались с такими сайтами, которые имеют уникальный скроллбар (к примеру, наш сайт). Есть два способа реализации этой задачи: с помощью CSS3 или используя jQuery плагин. Мы будем использовать наиболее простой — напишем CSS стили.

Примечание: стилизовать полосу прокрутки через -webkit префикс возможно только в браузерах, использующих механизм рендеринга Webkit (и Blink). То есть в Firefox и IE этот способ не сработает.

Часто бывает необходимо убрать или скрыть скроллбар css совсем. Для начала, давайте рассмотрим как это сделать.

1 Как убрать полосу прокрутки CSS

Скрыть полосу прокрутки можно как у отдельного элемента на странице, так и у всей страницы целиком. Сделать это не сложно, достаточно написать следующее свойство:

CSS /*Убрать полосу прокрутки у элемента*/ .element::-webkit-scrollbar { width: 0; } /*Убрать полосу прокрутки для всей страницы*/ ::-webkit-scrollbar { width: 0; } 

2 Как изменить скроллбар CSS

Теперь давайте рассмотрим базовую структуру полосы прокрутки:

-webkit-scrollbar состоит различных псевдо-элементов.

1. ::-webkit-scrollbar — это фон самого скроллбара.
2. ::-webkit-scrollbar-button — кнопки направления на полосе прокрутки.
3. ::-webkit-scrollbar-track — пустое пространство под индикатором прокрутки.
4. ::-webkit-scrollbar-thumb — индикатор прокрутки, перетаскиваемый элемент.

Проверим как все это работает. Чтобы попробовать изменить скроллбар css, создадим пустой HTML документ. Вам необходимо добавить style.css ваш HTML файл. В разметку добавим div с id element, имеющий полосу прокрутки, чтобы применить на него наши стили.

HTML         
   

3 CSS стили

Для того, чтобы у элемента div появилась полоса прокрутки, добавим следующие свойства.

CSS #element { overflow-y: scroll; background-color: #ffffff; width: 200px; height: 200px; } .overflow { min-height: 400px; } 

Теперь давайте используем псевдоэлемент для создания пользовательского скроллбара. Заменим ширину по умолчанию на новую — в 7 пикселей. Затем, добавим цвет полосы через свойство background-color: #f9f9fd .

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

CSS #element::-webkit-scrollbar { width: 7px; background-color: #f9f9fd; } 

Ширина полосы в 7 пикселей

Мы уже знаем, что скроллбар состоит из полосы, кнопки и индикатора прокрутки. Используем псевдо элемент ::-webkit-scrollbar-thumb , для того чтобы стилизовать индикатор.

CSS #element::-webkit-scrollbar-thumb { background-color: #223c50; } 

Изменение цвета индикатора

Добавим свойство box-shadow полосе, чтобы добавить скроллбару контрастность. Подобрать подходящую тень можно в нашем box-shadow генераторе.

CSS #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } 

Добавление внутренней тени

В заключении: вот еще несколько вариантов, которые вы можете использовать на своем сайте.

Пример 1
Пример 2
Пример 3
Пример 4

Пример 1 #element::-webkit-scrollbar { width: 10px; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #18aaaa; } #element::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); border-radius: 10px; background-color: #f9f9fd; } 

Пример 2 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { background-color: #f2bf93; background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .25) 75%, transparent 75%, transparent); } 

Пример 3 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { background-color: #356184; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .25)), color-stop(.5, transparent), to(transparent)); } 

В четвертом примере мы используем градиент. Настроить его можно в CSS генераторе градиента.

Пример 4 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; border-radius: 10px; } #element::-webkit-scrollbar-thumb { border-radius: 10px; background: linear-gradient(180deg, #00c6fb, #005bea); } 

Скрытие скроллбаров в браузерах

Возникло такое пожелание от заказчика, скрыть скроллинг внизу и справа, которые всегда появляется по умолчанию. Для этого прописываем через CSS для тега BODY следующую команду.

body

Чтобы скрыть отдельные полосы прокрутки используем следующие команды для тега HTML (работает только в FF и IE) в 2008 году:

html < overflow-x : hidden; /*скрытие горизонтальной прокрутки*/ overflow-y : hidden /*скрытие вертикальной прокрутки*/ >

Что бы скрыть скролбар, но при этом иметь прокрутку блока колесиком мышки или свайпом, используем другой код:

.element::-webkit-scrollbar < width : 0 !important /* Webkit */ >.element < -ms-overflow-style : none; /* IE10+ */ overflow : -moz-scrollbars-none; /* FireFox, но может не работать */ >

Более универсальное решение для скрытия скролбара, которое работает в 2019 году:

::-webkit-scrollbar < /* Webkit */ width : 0; /* ширина scrollbar'a */ background : transparent /* опционально */ >html < -ms-overflow-style : none; /* IE 10+ */ scrollbar-width : none /* Firefox */ >

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

Как убрать с сайта вертикальную полосу прокрутки?

Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden , но, естественно, скролл перестает работать.

Отслеживать
67.9k 216 216 золотых знаков 77 77 серебряных знаков 219 219 бронзовых знаков
задан 1 сен 2015 в 8:11
Вадим Авлочинский Вадим Авлочинский
85 1 1 золотой знак 3 3 серебряных знака 9 9 бронзовых знаков
Есть куча плагинов для этого, можно сделать самому — ловить нужные события и скролить контент
1 сен 2015 в 8:20
1 сен 2015 в 9:06

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Привет, если речь идет именно о body то ему необходимо присвоить значение overflow-y:hidden а уже в body вставить div с контентом, например вот таким образом клик или клик там уже скрыть скролл у diva без последствий не работы прокрутки, если речь идет о простом div(например, меню):

Допустим есть левый блок меню. В этом блоке идет нумерованный список пунктов, на 100 примерно.

div.LeftScrollBlock < width: 200px; height: 320px; overflow:auto; border:1px solid grey; >div.parent

• ссылка-1
• ссылка-2
• ссылка-3
• ссылка-4
• ссылка-5
• ссылка-6
• ссылка-7
• ссылка-8
• ссылка-9
• ссылка-10
• ссылка-11
• ссылка-12
• ссылка-13
• ссылка-14
• ссылка-15
• ссылка-16
• ссылка-17
• ссылка-18
• ссылка-19
• ссылка-20
• ссылка-21
• ссылка-22
• ссылка-23
• ссылка-24
• ссылка-25
• ссылка-26
• ссылка-27
• ссылка-28
• ссылка-29
• ссылка-30

Отслеживать
ответ дан 1 сен 2015 в 8:52
Ильгам Каримов Ильгам Каримов
167 12 12 бронзовых знаков

Предположим, так. С шириной и кроссбраузерностью разберёшься сам. Ещё, выделением текста можно проскроллить вправо.

А вообще, скрывать скролл — это плохая идея.

html, body < overflow: hidden; height: 100%; box-sizing: border-box; margin: 0; >body

Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать.
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать.

Вариант без calc с использованием фиксированного позиционирования. Решает проблему с горизонтальной прокруткой при выделении.

html < overflow: hidden; >body

Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать.
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать.

Ещё вариант для хромиумовов:

::-webkit-scrollbar

Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать.
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать. 
Здравствуйте. Можно ли убрать, скрыть на сайте методами css или javascript вертикальную прокрутку, но , чтобы при этом скролл работал как обычно? К body, например, можно применить overflow-y:hidden, но естественно скролл перестает работать.