Как отключить скролл 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; /* включает вертикальный скролл */ > В этом примере мы отключаем горизонтальный скролл и включаем только вертикальный скролл на странице.
Как запретить скроллинг в секторе content, при открытом меню?
Дано:
Раскрытое меню взятое отсюда (уменьшите экран, для понимая вопроса)
Слева остается контентная зона. Но если высота сайта будет больше чем заданная в примере, то при открытом меню можно будет левую часть, тоже скроллить.
Надо: Чтобы левую (контентную зону) скроллить было нельзя.
Как не получалось:
На просторах интернета находил такой код
position: fixed; overflow: hidden;Но он просто «СТОПарит» нужную зону, и не дает двигаться, ПРИ ЭТОМ возвращая в начало экрана.
То есть если мы даже прокрутим страницу вниз, и нажмем открыть меню, то вернемся вверх.
До нажатия 
После нажатия 
Как видите, возвращает обратно наверх. Как этого избежать?
UPD. Нашел такой линк
var prevent = function(event) < window.scrollTo(0, 0); event ? event.preventDefault() : window.event.returnValue = false; >; if(window.addEventListener) < var array = ['DOMMouseScroll', 'mousewheel', 'scroll'], i = array.length; while(i--) < window.addEventListener(array[i], prevent, false); >> else window.onmousewheel = document.onmousewheel = window.onscroll = prevent;Вроде сработало, но оно сработало на весь класс контента.
У меня есть контент зона .cd-main-content
И она же когда раскрытое меню .cd-main-content.nav-is-visible
И я понимаю что сюда
var array = ['DOMMouseScroll', 'mousewheel', 'scroll'],вместо scroll надо впихнуть .cd-main-content.nav-is-visible, а как впихнуть двойной класс?
UPD. нашел вариант , кто подскажет, почему в последнем моей примере, не двигается контентная зона?
- Вопрос задан более трёх лет назад
- 24674 просмотра
Блокировка скроолла при открытии меню
Приветствую. Меню работает по клику на кнопку, выезжает. Оно перекрывает окно полностью (position absolute и z-index). Но нужно запретить скролл под окном. Нашёл два варианта решения, оба рабочих, но приладить под свою задачу не получилось. Вот js, которым меняю классы у кнопки и меню для открывания и закрывания.
$(document).ready(function()< var $topSide = $('#slidemenu'); $('#open-button').click(function () < $topSide.toggleClass('slidemenu-open'); $('#open-button').toggleClass('open-button-close'); >); >); А вот варианты, которыми можно заблокировать скролл: Вариант 1 и Вариант 2 Оба исполняют нормально, первый на мой взгляд компактнее, не требует либу подключать, но это роли не играет. Дело в том, что оба варианта работают за счёт две отдельных кнопок (вкл/выкл). Как можно обе функции повесить на обычную ссылку или любой другой элемент (a, div, span) — чтобы ткнул на кнопку: открылось меню, заблокировался скролл; ткнул ещё раз — меню убралось, скролл работает.
Как предотвратить прокрутку страницы, при открытом модальном окне
После скроллинга и закрытия модального окна пользователь попадает на совершенно другое место на странице. Потому что содержимое страницы перемещается вслед за скроллингом. Это можно предотвратить с помощью приемов 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 больше не прокручивается при открытом модальном окне, а положение скроллинга сохраняется.