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

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