Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.63/8: Рейтинг темы: голосов - 8, средняя оценка - 4.63
 Аватар для joyfulnick
0 / 0 / 0
Регистрация: 08.02.2015
Сообщений: 28

При overflow: hidden не скроллится страница в мобильной версии

26.09.2022, 10:10. Показов 2054. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброго времени суток!

В HTML прописано:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body class="noscroll">
    <div class="popup" id="popup">
        <ul class="menu">
            <li>
                <a href="#">...</a>
                </li>
                <li>
                <a href="#">...</a>
                </li>
                <li>
                <a href="#">...</a>
                </li>
            </ul>
    </div>
</body>
В CSS прописано:

CSS
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
31
32
33
34
35
36
37
38
39
40
41
42
body.noscroll {
        overflow: hidden;
}
.popup {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        height: 100%;
        background-color: #fff;
        z-index: 100;
        display: flex;
        transition: 0.3s;
}
.popup.open {
        left: 0;
}
.menu {
    width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        padding: 50px 0;
        overflow: auto;
}
.menu > li {
        width: 100%;
}
.menu > li > a {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 20px 0;
        font-size: 20px;
        font-weight: bold;
        color: #595959;
}
.menu > li > a:hover {
        background-color: rgba(0, 164, 157, 0.1);
}
Но тут беда: когда в body стоит атрибут overflow: hidden, то страница в мобильнике не скроллится, даже когда бургер-меню закрыто. А когда убираю этот атрибут, страница скроллится в обоих случаях, даже при открытом меню... Как сделать, чтобы при закрытом меню страница скроллилась, а при открытом нет?
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
26.09.2022, 10:10
Ответы с готовыми решениями:

После overflow: hidden страница не скролится
Собственно вопрос в заголовке темы. Мне надо скроллбар сделать невидимым, но чтобы при прокрутке колёсиком страница скролилась. Как? ...

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

Страница немного двигается вправо в мобильной версии
Не могу понять что не так. Но в мобильном устройстве сайт немного двигается вправо.

8
Модератор
Эксперт HTML/CSS
 Аватар для AlexZaw
2379 / 1739 / 677
Регистрация: 07.08.2016
Сообщений: 4,094
26.09.2022, 11:19
Цитата Сообщение от joyfulnick Посмотреть сообщение
даже когда бургер-меню закрыто
Что значит "даже когда закрыто"? Само по себе открытие/закрытие бургер меню не ничего со скроллом не делает
Цитата Сообщение от joyfulnick Посмотреть сообщение
Как сделать, чтобы при закрытом меню страница скроллилась, а при открытом нет?
Ответ как бы сам собой напрашивается - при открытии меню навешивать overflow на body, а при закрытии меню убирать
0
 Аватар для joyfulnick
0 / 0 / 0
Регистрация: 08.02.2015
Сообщений: 28
26.09.2022, 12:07  [ТС]
Цитата Сообщение от AlexZaw Посмотреть сообщение
Ответ как бы сам собой напрашивается - при открытии меню навешивать overflow на body, а при закрытии меню убирать
Т.е для этого нужно создавать JavaScript? Или можно обойтись CSS? Суть в том, что я JavaScript не изучал, только HTML и CSS...

Добавлено через 17 минут
Цитата Сообщение от AlexZaw Посмотреть сообщение
Ответ как бы сам собой напрашивается - при открытии меню навешивать overflow на body, а при закрытии меню убирать
Попробовал сделать так:

CSS
1
2
3
.popup.open .noscroll {
        overflow: hidden;
}
Страница всё равно шевелится при открытом меню ))
0
Модератор
Эксперт HTML/CSS
 Аватар для AlexZaw
2379 / 1739 / 677
Регистрация: 07.08.2016
Сообщений: 4,094
26.09.2022, 14:51
Цитата Сообщение от joyfulnick Посмотреть сообщение
Или можно обойтись CSS?
CSS не умеет добавлять/удалять элементам классы или стили в разметку.
Цитата Сообщение от joyfulnick Посмотреть сообщение
Суть в том, что я JavaScript не изучал
Изучайте Хотя бы на уровне умения работы с DOM и событиями.
Цитата Сообщение от joyfulnick Посмотреть сообщение
Страница всё равно шевелится при открытом меню
Чтобы она не шевелилась, при таком селекторе, нужно чтобы у html были классы .popup.open, а у body .noscroll
0
 Аватар для joyfulnick
0 / 0 / 0
Регистрация: 08.02.2015
Сообщений: 28
28.09.2022, 08:29  [ТС]
Цитата Сообщение от AlexZaw Посмотреть сообщение
Изучайте Хотя бы на уровне умения работы с DOM и событиями.
А зачем изучать, когда он уже прописан у меня?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const hamb = document.querySelector("#hamb");
const popup = document.querySelector("#popup");
const body = document.body;
 
hamb.addEventListener("click", hambHandler);
 
function hambHandler(e) {
    e.preventDefault();
    popup.classList.toggle("open");
    hamb.classList.toggle("active");
    body.classList.toggle("noscroll");
    renderPopup();
}
 
links.forEach((link) => {
    link.addEventListener("click", closeOnClick);
});
 
function closeOnClick() {
    popup.classList.remove("open");
    hamb.classList.remove("active");
    body.classList.remove("noscroll");
}
Суть в том, что я кое-что не дописал для Вас, прошу прощения... Когда меню открыто, страница скроллится, а когда меню закрыто, скролл неподвижен почему-то... А должно быть всё наоборот
0
Молодой техлид)
Эксперт JSЭксперт HTML/CSS
 Аватар для mr_dramm
1818 / 1056 / 329
Регистрация: 17.07.2021
Сообщений: 2,147
Записей в блоге: 14
28.09.2022, 11:28
опубликуйте код целиком, и прочитайте что делает функция classList.toggle()
0
 Аватар для joyfulnick
0 / 0 / 0
Регистрация: 08.02.2015
Сообщений: 28
28.09.2022, 13:23  [ТС]
Цитата Сообщение от mr_dramm Посмотреть сообщение
опубликуйте код целиком, и прочитайте что делает функция classList.toggle()
JavaScript
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
31
32
33
34
35
36
37
38
39
const hamb = document.querySelector("#hamb");
const popup = document.querySelector("#popup");
const body = document.body;
 
// Клонируем меню, чтобы задать свои стили для мобильной версии
const menu = document.querySelector("#menu").cloneNode(1);
 
// При клике на иконку hamb вызываем функцию hambHandler
hamb.addEventListener("click", hambHandler);
 
// Выполняем действия при клике ..
function hambHandler(e) {
    e.preventDefault();
// Переключаем стили элементов при клике
    popup.classList.toggle("open");
    hamb.classList.toggle("active");
    body.classList.toggle("noscroll");
    renderPopup();
}
 
// Здесь мы рендерим элементы в наш попап
function renderPopup() {
    popup.appendChild(menu);
}
 
// Код для закрытия меню при нажатии на ссылку
const links = Array.from(menu.children);
 
// Для каждого элемента меню при клике вызываем функцию
links.forEach((link) => {
    link.addEventListener("click", closeOnClick);
});
 
// Закрытие попапа при клике на меню
function closeOnClick() {
    popup.classList.remove("open");
    hamb.classList.remove("active");
    body.classList.remove("noscroll");
}
0
Модератор
Эксперт HTML/CSS
 Аватар для AlexZaw
2379 / 1739 / 677
Регистрация: 07.08.2016
Сообщений: 4,094
28.09.2022, 14:56
Лучший ответ Сообщение было отмечено joyfulnick как решение

Решение

Цитата Сообщение от joyfulnick Посмотреть сообщение
А зачем изучать, когда он уже прописан у меня?
Для того чтобы не создавать подобные темы и не ждать ответа, а быстренько находить ответ самому

Насколько я понял у вас у body изначально прописан класс noscroll, поэтому все и работает наоборот. При нажатии на гамбургер код body.classList.toggle("noscroll"); убирает класс noscroll если он есть или добавляет если его нет.
0
 Аватар для joyfulnick
0 / 0 / 0
Регистрация: 08.02.2015
Сообщений: 28
09.10.2022, 20:13  [ТС]
Цитата Сообщение от AlexZaw Посмотреть сообщение
Чтобы она не шевелилась, при таком селекторе, нужно чтобы у html были классы .popup.open, а у body .noscroll
Как выяснилось, нужно было убрать класс noscroll у body в HTML коде, а в CSS оставить, что я и сделал. Всё сработало! Огромное спасибо!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
09.10.2022, 20:13
Помогаю со студенческими работами здесь

В мобильной версии одна страница (корзина) почему-то отображается искаженно (Woocommerce)
Здравствуйте. Вот ссылка http://glamface.ru/cart/ Скрин прилагаю, проблема только при посещении со смартфона и только на странице...

Влияние z-index при overflow: hidden
Есть простой код: &lt;div class=&quot;block1&quot;&gt;&lt;/div&gt; &lt;div class=&quot;block2&quot;&gt; &lt;div class=&quot;mezhdu&quot;&gt;бла бла бла&lt;/div&gt; &lt;/div&gt; ...

Можно ли узнать направление прокрутки колеса мыши, при overflow: hidden?
Написал код, для плавной прокрутки. Но он начинает циклиться и не останавливается: var lastScrollTop = 0; function onScroll () { var...

Почему не работает overflow hidden при transform scale? Как исправить?
Надо что бы картинка зумилась по наведению, но размер блока не менялся. Прикрепил архив.

Не скроллится страница
Добрый вечер! У меня проблема с сайтом. Во всех браузерах страница без проблем скроллится, но в google chrome стоит на месте , только с...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru