Как запретить прокрутку страницы html
Перейти к содержимому

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

  • автор:

Как запретить скролл сайта, если поверх него есть фиксированный блок с прокруткой вниз?

Задача:
На мобильной версии сайта сделать меню поверх всего сайта.
Делаю просто, пример:

.menu

Внутри этого блока длиный список меню. (ul)
Все хорошо, только есть одна проблема:
После прокрутки меню начинает прокручиваться сам сайт. Как этого избежать и прокручивать только блок с меню?

  • Вопрос задан более трёх лет назад
  • 45409 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 1

iiiBird

iBird Rose @iiiBird Куратор тега CSS
Пока ты спишь — твой конкурент совершенствуется
задать для body когда этот блок активен
Ответ написан более трёх лет назад
Нравится 6 8 комментариев
Александр @Palehin Автор вопроса
Пробовал — не помогает

iiiBird

iBird Rose @iiiBird Куратор тега CSS
Александр: не может не помогать. значит не правильно пробуешь
Александр @Palehin Автор вопроса

iBird Rose: overflow: hidden — скрывает все, что находится ЗА ПРЕДЕЛАМИ элемента. Если его применить к body, в котором содержится куча контента (следовательно, элемент имеет большую высоту), то это никак не спасет ситуацию, потому что скроется все что находится ЗА ПРЕДЕЛАМИ body а не в нем.

В таком случае придется искусcтвенно выставлять высоту и ширину body

iiiBird

iBird Rose @iiiBird Куратор тега CSS

Александр: зачем? если ты при открытии своего меню задашь для body overflow: hidden — то сайт перестанет скроллится просто. а твое меню уже нормально будет скролится. а если закрыть меню — то overflow для body возвращаешь

Как предотвратить прокрутку страницы, при открытом модальном окне

После скроллинга и закрытия модального окна пользователь попадает на совершенно другое место на странице. Потому что содержимое страницы перемещается вслед за скроллингом. Это можно предотвратить с помощью приемов CSS и JavaScript.

Обновлено: 2023-10-17 13:36:36 Наталья Кайда автор материала

Начнем с чего-нибудь простого

Можно помешать перелистыванию станицы при открытом модальном окне, установив высоту модального окна на полную высоту области просмотра и используя overflow-y: hidden при открытом модальном диалоге:

body.modal-open

Но если перед открытием модального окна мы уже перешли к содержимому , то получим небольшое горизонтальное смещение.

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

body < height: 100vh; overflow-y: hidden; padding-right: 15px; /* Avoid width reflow */ >

Чтобы все работало, модальное окно должно быть меньше, чем высота области просмотра. Иначе на странице появится полоса прокрутки.

Как на счет мобильной версии?

Данное решение отлично работает как на ПК, так и на Android. Но в браузере Safari для iOS не все так гладко. Потому что содержимое страницы все еще прокручивается при открытом модальном диалоге.

В качестве обходного пути можно установить элемент body в position: fixed:

body

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

Необходимо обратиться к JavaScript

Мы можем использовать JavaScript, чтобы избежать проблемы с событием касания. Метод stopPropagation некорректно работает при обработке касания в устройствах на iOS. Но зато метод preventDefault действует отлично. Это означает, что нам необходимо добавить обработчик событий к каждому узлу DOM модального окна. Это можно реализовать с помощью jQuery.

Улучшим подход с фиксированным элементом body

Вот с чем мы работали:

body

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

// Когда модальное окно открыто, фиксируем элемент body document.body.style.position = 'fixed'; document.body.style.top = `-$px`; // Когда модальное окно скрыто, остаемся в верхней части позиции прокрутки document.body.style.position = ''; document.body.style.top = '';

Но еще осталась одна проблема. На странице изменяется положение скроллинга при открытом диалоге и зафиксированном body. Поэтому нужно восстановить расположение ползунка прокрутки. Чтобы разобраться с проблемой, изменим код JavaScript.

// When the modal is hidden. const top = document.body.style.top; document.body.style.position = ''; document.body.style.top = ''; window.scrollTo(0, parseInt(scrollY || '0') * -1);

Теперь содержимое body больше не прокручивается при открытом модальном окне, а положение скроллинга сохраняется.

EvgeniyaPronina / no scroll

Save EvgeniyaPronina/37abb60bd1d6f639806d934f00fa3ff3 to your computer and use it in GitHub Desktop.

Убрать полосы прокрутки полосу прокрутки, и запретить скролл(scroll) на сайте при помощи css или js когда нам она не нужна, например при отображении того же попап окна (popup window) или любого другого всплывающего элемента на странице (рекламы).

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

//Запретить скролл:
$(«html,body»).css(«overflow»,»hidden»);
//или только вертикальный скролл:
$(«body»).css(«overflow-y»,»hidden»);
//и на css:
position:fixed;overflow:hidden
//Запретить scroll на чистом JS можно так:
document.body.style.overflow = ‘hidden’;
//Убрать скроллинг на IPAD можно так:
document.body.addEventListener(‘touchmove’,function(event),false);
//на jQuery:
$(document).bind(‘touchmove’, false);
//P.S: Данный способ не работает на мобильных устройства, так как там используется точпад, по этому необходимо для body применять свойство position:fixed; пример:
создаем сам класс
.fixed
position:fixed; /*позицианируем чтобы исчез скролл*/
width:100%; /*что бы верстка не складывалась по ширине*/
>
//Применяем когда нам это необходимо
$(«body»).addClass(«fixed»);
//и убираем его когда нужно сновa включить прокрутку
$(«body»).removeClass(«fixed»);

Как отключить скролл 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; /* включает вертикальный скролл */ > 

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *