Как убрать прокрутку страницы в браузере

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

Как убрать полосу прокрутки в HTML при помощи простых свойств CSS? Довольно просто. Сначала нужно понять что именно вызывает появления полосы прокрутки на сайте в том или ином месте, например, в форме, в таблице или просто на странице.

Чаще всего она появляется в неожиданных местах из-за неправильно выставленной ширины определённого блока. Например, он слишком широкий, поэтому вылазит за пределы страницы и автоматически появляется прокрутка, чтобы пользователь смог увидеть всю информацию, весь выехавший за пределы экрана текст.

Причины появления полосы прокрутки — слишком большая ширина блоков и отступы (внутренние и наружные).

Для того, чтобы увидеть в чём причина, нужно по очереди через инструменты разработчика в браузере Google Chrome (F12) выбирать каждый блок и отключать поочерёдно ширину (width) и отступы (как padding, так и margin). А уже когда причина будет найдена, в тех же инструментах разработчика можно увидеть где именно нужно будет внести изменения (отдельно в файле css или же напрямую в стилях блока).

Иногда достаточно просто уменьшить ширину нужного блока и проблема будет решена. В других случаях нужно искать причину в отступах, возможно, придётся их уменьшать или же снова в первую очередь уменьшать ширину проблемного блока.

Полоса прокрутки нужна в определённых случаях, например, при показе кода, когда перенос символов на другую строку невозможен и некорректен или для того, чтобы показать какую-то большую картинку, которая не входит в размеры экрана, в браузере справа при просмотре сайтов она необходима. Можно убрать и необходимую автоматическую полосу прокрутки, но это уже другая история.

Как убрать прокрутку мышью?

Как убрать полосы прокрутки?
Перед тем как убрать полосы прокрутки (скроллбар) с веб-страницы, подумайте, действительно ли вам это так необходимо. Отсутствие возможности прокрутки содержимого веб-страницы создает трудности посетителям сайта для просмотра информации. Если же существует необходимость построения дизайнерских изысков или желание создать своим читателям трудности, то вперед, к делу. Но вас предупреждали! Фреймы
Для управления отображением полос прокрутки во фреймах используется параметр scrolling. Он может принимать два основных значения: Yes – всегда вызывает появление полос прокрутки, независимо от объема информации и No – запрещает их появление (пример 1).

Пример 1. Запрет полосы прокрутки во фреймах

Как показано в примере, в левом фрейме с именем MENU полосы прокрутки не будет. В соседнем с ним фрейме, хотя параметр scrolling и не указан, полосы прокрутки будут видны, как возможность установленная по умолчанию.
Новые окна
Чтобы удалить скроллбар из новых окон, возможностей HTML будет недостаточно. Универсальный подход требует использования языка JavaScript для создания нового окна. А в качестве одного из параметра метода window.open, который и создает окно, можно указать scrollbar=0. Данный атрибут создает окно без горизонтальных и вертикальных полос прокрутки (пример 2).

Пример 2. Создание нового окна без полос прокрутки

window.open(«tips.html», «TIP», «width=400, height=300, status=0, menubar=0, location=0, resizable=0, directories=0, toolbar=0, scrollbar=0»);

Новое окно будет иметь размеры 400 на 300 пикселов и без различных элементов навигации, в том числе будут отсутствовать полосы прокрутки.
Использование стилей
Еще один способ, который будет работать лишь в некоторых браузерах (Internet Explorer 5, Netscape 6, Mozilla), основан на использовании атрибута overflow. Если этот параметр применить к тегу BODY со значением hidden, скроллбар на веб-странице отображаться не будет (пример 3).

Пример 3. Запрет полосы прокрутки на веб-странице

Точно также можно убрать скроллбар и у других элементов веб-страницы, которые его содержат – некоторые элементы форм, например.

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

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

Можно ли убрать, скрыть на сайте методами 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, но естественно скролл перестает работать.

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

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

Казалось бы, элементарный технический нюанс, иногда встречающийся при создании сайтов. Однако, порывшись в поисковиках, был удивлён, что не нашёл простого решения этого вопроса на css.

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

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

Упорядочив информацию, привожу ниже в все три способа скрытия полосы прокрутки: на CSS, с помощью HTML конструкций и с помощью JavaScript.

1-ый способ (css):

Ключевой момент — использование псевдоэлемента -webkit-scrollbar с шириной равной нулю.

Конструкция HTML будет иметь следующий вид:

 
Контент.
 
 

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

Первый способ скрытия полосы прокрутки будет работать только для браузеров на движке WebKit.

2-ой способ (HTML+CSS):

Ключевой момент — ширину внутреннего контейнера задаём больше на 20px относительно внешнего контейнера, что примерно равно ширине полосы прокрутки.

Конструкция HTML будет иметь следующий вид:

 
 
 
Контент.
 
 

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

Говоря о скрытии скроллбара с помощью HTML-конструкций необходимо донести читателю, что кроме вышеприведённого способа, в котором полоса прокрутки скрывается за счёт увеличения свойства width относительно внешнего контейнера, существуют и другие подходы. Это и увеличение горизонтальных отступов и изменение свойств позиционирования и возможно другие. Здесь уже как мысль развернётся.

3-ий способ (JavaScript):

Ключевой момент — с помощью js-скрипта задаём правый отступ (padding-Right) внутреннего контейнера, что бы увеличить его ширину для скрытия полосы прокрутки.

Конструкция HTML будет иметь следующий вид:

 
 
Контент.
 

CSS стили будут иметь следующий вид:

.sposob-3 < width: 250px; height: 342px; margin: 0 25px; overflow: hidden; >.sposob-3-inside

JavaScript код будет следующим:

var parent = document.getElementById('spb-1'); var child = document.getElementById('spb-2'); child.style.paddingRight = child.offsetWidth - child.clientWidth + "px";

Третий способ — это по сути второй, только в данном случае мы увеличиваем ширину внутреннего контейнера относительно внешнего за счёт задания правого внутреннего отступа (padding-Right) с помощью js-скрипта.