Не удается скрыть overflow-x в медиа-запросе

#javascript #html #css #media-queries #overflow

Вопрос:

У меня есть заголовок с меню, который изменяется на меню бургеров, когда ширина экрана меньше 650 пикселей. После этого меню позиционируется как абсолютное и переводится вправо. Когда я нажимаю на меню burger, оно появляется в поле зрения. После этого все работает, но я не могу заставить overflow исчезнуть. Я пытался поэкспериментировать с добавлением overflow к разным родительским элементам, но безрезультатно.

Вот страница — https://badgerwannabe.github.io/rocket-sockets/index.html Вот представитель Github с файлами введите описание ссылки здесь

Был бы признателен за любую помощь.

UPD1: Шаги для воспроизведения Перейдите на веб-сайт, откройте Dev Tools и измените размер окна просмотра до ширины менее 650 пикселей, попробуйте прокрутить вправо, и вы увидите проблему. Добавление overflow в тело в этом медиа-запросе не помогает

Ответ №1:

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

Редактировать: на основе комментария, если вы добавляете overflow-x: hidden в body тег, это должно сделать это за вас.

1. Проблема в том, что переполнение возникает, когда меню не открыто. Если вы зайдете на веб-сайт, перейдите в Инструменты разработчика и измените размер окна просмотра до ширины менее 650 пикселей, попробуйте прокрутить вправо, и вы увидите проблему. Добавление overflow в body в этом медиа-запросе не помогает.

2. Хорошо, теперь я вижу проблему. Позвольте мне взглянуть

3. Я обновил ответ. Дайте мне знать, если это сработает для вас

4. Возможно, я делаю что-то неправильно, но добавление «overflow-x: hidden» не работает ни в верхней части таблицы стилей, ни в медиа-запросе 650px, я пытался

5. Ах, спасибо! Теперь я вижу проблему. Не встречается в нескольких браузерах, но встречается для Chrome device view и my mobile device. Если вы также добавите overflow-x hidden к элементу HTML, например: html {overflow-x: hidden;} в точке останова 650px, это должно исправить

Ответ №2:

Проблема возникает из-за следующих элементов.

 ...
<img class="background-line" alt="background-line" src="assets/images/Path 18.png">
...
<img id="mailbox-sm" src="assets/images/Mask Group 4.png" alt="small mailbox">
...

Есть два варианта.

Добавить overflow-x: hidden к body элементу.
Установите правильную ширину для вышеуказанных элементов.

1. Привет, спасибо за ваш вклад. «background-line» и «mailbox-sm» действительно вызывают переполнение, но оно не такое большое, как у меня на данный момент, это определенно меню. Кроме того, добавление «overflow-x: hidden» к элементу body не помогает. ни в верхней части style.css, ни в медиа-запросе 650px.

Ответ №3:

Когда вы переводите меню вправо (т. Е. Вне поля зрения), вы также можете установить его

display: none;

установка его обратно в

display: flex

когда вы хотите, чтобы он отображался в поле зрения.

1. Да, это решает проблему, однако при этом теряется анимация скольжения в поле зрения. Вы знаете, как я могу показать анимацию с сохранением исправления «display: none»? Странно, что для других людей это работает, т.Е. выталкивает элемент из области просмотра и отключает overflow-x в теле.