Отключить прокрутку тела

138

Я бы хотел полностью отключить прокрутку HTML body. Я пробовал следующие варианты:

  • overflow: hidden; (не работает, прокрутку не отключал, просто скрывал полосу прокрутки)

  • position: fixed; (это сработало, но полностью прокручивалось вверх, что неприемлемо для этого конкретного приложения)

Мне не удалось найти альтернатив этим двум вариантам, есть ли еще?

html css scroll Миха Виденманн
источник
3
для какого элемента вы применили overflow: hidden?
Саджад Карутхедат
Чего именно вы здесь пытаетесь достичь? Какова твоя конечная цель?
jbutler483
2
Если указать соответствующий код, вам будет проще помочь.
Sleek Geek
1
переполнение: скрытое; это путь Если он не работает, у вас есть другая проблема с вашим css. Попробуйте html, body {overflow: hidden;}, если это не сработает, попробуйте * {overflow: hidden;} и попытайтесь выяснить, что не так
Джонас Груманн,

Ответы:

246

Установите heightи overflow:

html, body {margin: 0; height: 100%; overflow: hidden}

http://jsfiddle.net/q99hvawt/

пантера
источник
3
забыл про "html" перед "body.
2
Не работает на iOS, если у вас есть элемент наложения с фиксированным положением.
notQ
1
Вы можете просто добавить «переполнение»: «скрытый», и все будет нормально.
JPG
Это решение у меня не сразу сработало, но после проверки где-то перекрывалась "маржа". Установка этого элемента "margin: 0;" сделал свое дело.
joaoprib
19

HTML css отлично работает, если тег body ничего не делает, вы также можете написать

<body scroll="no" style="overflow: hidden">

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

Лало
источник
21
Это недействительный HTML5
mbomb007
@ mbomb007 Не могли бы вы прокомментировать здесь ошибку, связанную с HTML5?
Итан
5
@Ethan Недопустимый scrollатрибут для <body>тега. Он не указан как действительный ни в одной из спецификаций, которые я могу найти. w3schools ; MDN ; Quackit
mbomb007
14

Этот пост был полезен, но я просто хотел поделиться небольшой альтернативой, которая может помочь другим:

Настройка max-heightвместо heightтакже делает свое дело. В моем случае я отключаю прокрутку на основе переключателя классов. Установка, .someContainer {height: 100%; overflow: hidden;}когда высота контейнера меньше, чем высота области просмотра, приведет к растяжению контейнера, чего вы бы не хотели. Это max-heightучитывается при настройке , но если при изменении содержимого высота контейнера больше, чем высота окна просмотра, прокрутка по-прежнему отключается.

joebjoe
источник
это сэкономило мне время для настольных браузеров без нежелательного побочного эффекта scroll-top-top. но не работал в мобильных браузерах (iphone5s и android).
Боб
5

Для этого добавьте к <body>элементу 2 свойства CSS .

body {
   height: 100%;
   overflow-y: hidden;
}

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

Телеграф

bvdb
источник
это скрывает полосу прокрутки. Однако вопрос конкретно касается альтернативы
скрытию
@DataGeek, это не только скрывает полосу прокрутки, но и останавливает возможность прокрутки вниз. И, насколько я понимаю, это то, о чем просили. т.е. не только скрыть его, но и сделать невозможным прокрутку вниз.
bvdb