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

Как отключить скролл css

Чтобы отключить скролл страницы в CSS, можно использовать свойство overflow для задания свойства hidden . Это свойство скрывает любой контент, который выходит за границы родительского элемента.

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

body  overflow: hidden; >

Это скроет скролл на странице, но также отключит и возможность прокрутки страницы. Если вы хотите отключить скролл только для определенного элемента, вы можете применить этот стиль к этому элементу:

.container  overflow: hidden; >

Здесь мы применяем свойство overflow: hidden к элементу с классом container . Это скроет все контент, который выходит за границы элемента с классом container .

Если вы хотите отключить только горизонтальный или вертикальный скролл, вы можете использовать свойства overflow-x и overflow-y . Например:

body  overflow-x: hidden; /* отключает горизонтальный скролл */ overflow-y: scroll; /* включает вертикальный скролл */ >

В этом примере мы отключаем горизонтальный скролл и включаем только вертикальный скролл на странице.

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

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

Отслеживать
68k 218 218 золотых знаков 79 79 серебряных знаков 221 221 бронзовый знак
задан 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

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

::-webkit-scrollbar

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

Как убрать полосы прокрутки?
Перед тем как убрать полосы прокрутки (скроллбар) с веб-страницы, подумайте, действительно ли вам это так необходимо. Отсутствие возможности прокрутки содержимого веб-страницы создает трудности посетителям сайта для просмотра информации. Если же существует необходимость построения дизайнерских изысков или желание создать своим читателям трудности, то вперед, к делу. Но вас предупреждали! Фреймы
Для управления отображением полос прокрутки во фреймах используется параметр 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. Запрет полосы прокрутки на веб-странице

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

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

Как убрать полосы прокрутки?

Убрать горизонтальные или вертикальные полосы прокрутки со страницы, не зависимо от объёма страницы.

Решение

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

Способ основан на использовании свойства overflow , которое добавляется к селектору HTML, как показано в примере 1.

Пример 1. Страница без полос прокрутки

HTML5 CSS2.1 IE Cr Op Sa Fx

    Полосы прокрутки html < overflow: hidden; >div Бла-бла

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

Также можно использовать свойство overflow-x , чтобы скрыть только горизонтальную полосу прокрутки и overflow-y — для сокрытия вертикальной полосы. В примере 2 показано добавление слоя с минимальной шириной 800 пикселов. При уменьшении окна браузера до этой величины, слой перестаёт менять свои размеры и появляется горизонтальная полоса прокрутки. С помощью свойства overflow-x полосы прокрутки скрываются.

Пример 2. Нет горизонтальной полосы прокрутки

HTML5 CSS3 IE Cr Op Sa Fx

    Полосы прокрутки   Бла-бла

Свойства overflow-x и overflow-y входят в спецификацию CSS3 и не проходят валидацию при проверке стилей на CSS2.1.