Overflow-x: hidden не предотвращает переполнение содержимого в мобильных браузерах
У меня есть веб-сайт здесь. При просмотре в браузере настольного компьютера черная строка меню правильно распространяется только до края окна, поскольку body имеет overflow-x:hidden . В любом мобильном браузере, будь то Android или iOS, черная строка меню отображается во всю ширину, что приводит к появлению пробелов в правой части страницы. Насколько я могу судить, этот пробел даже не является частью тегов html или body . Даже если я установил для окна просмотра определенную ширину в :
Сайт расширяется до 1100 пикселей, но все еще имеет пробел, превышающий 1100 пикселей. Что мне не хватает? Как мне сохранить размер окна просмотра до 1100 и отключить переполнение?
Ответы (17)
Создание div-оболочки сайта внутри
и применение overflow-x:hidden к оболочке вместо или устранило проблему. Похоже, что браузеры, разбирающие тег , просто игнорируют атрибуты overflow в тегах html и body . Примечание. Вам также может потребоваться добавить position: relative в div-оболочку.Я обнаружил, что помимо установки overflow на hidden , мне нужно было установить position на _4 _. — person Victor S; 22.02.2013
Для меня просто добавление overflow-x: hidden к первому div внутри body работало нормально. Не нужно добавлять еще div , просто попробуйте установить его на крайний div . — person Gchtr; 12.08.2013
Добавление позиции к фиксированной не дает мне возможности прокручивать! — person theorise; 25.10.2013
Добавление div-оболочки с overflow: hidden помогло мне в iOS7! — person Jason Farnsworth; 03.03.2014
Я попробовал, я поместил весь свой код в div и дал ему overflow-x: hidden, но не работает, я также добавил ‹meta name = viewport content = width = device-width, initial-scale = 1›, но ничего не изменилось :/ Любые идеи? — person ; 25.10.2014
Не работал у меня на MobileSafari (iOS9), пока я не убедился, что метатег области просмотра выглядит следующим образом: — проблема здесь: изменение основного контейнера содержимого может вызвать большое изменение высоты документа, что, в свою очередь, может вызвать странное поведение масштабирования . — person leepowers; 18.11.2015
@leepowers overflow-x: hidden у меня все еще не работает даже после того, как я добавлю этот метатег. Не могли бы вы поделиться ссылкой на ваш сайт, где он работает? — person jupiteror; 01.12.2015
Определенно ^, если вы обнаружите элемент за пределами этой области, убедитесь, что он не установлен на absolute, а вместо этого установлен на fixed. — person JoeCodeCreations; 19.04.2017
Привет, банда, когда я обнаружил, что position:relative тоже работает. — person Thomas Valadez; 11.04.2018
overflow: scroll , если вы хотите, чтобы пользователь по-прежнему мог видеть переполненный контент — person user3666653; 04.11.2019
Я пробовал это для своего ионного приложения (только для устройств iOs), но он не работает ни для одной позиции содержимого тела. — person KuldipKoradia; 05.11.2019
Ты спас меня, чувак, Бог знает, что я работаю над этой проблемой с последних 3 часов Спасибо 1M — person NoorNoori; 06.02.2020
Исправлена проблема и для меня. В моем случае относительное позиционирование оболочки div не требовалось. — person pinglock; 23.08.2020
Обновление — в конце концов, относительное позиционирование было важно! Без него альбомная ориентация в мобильных браузерах нарушала макет. — person pinglock; 27.08.2020
Привет, отличный ответ, хотя это решает начальную проблему, но для любого из вас, у кого есть липкая навигация, она больше не прилипает! Я решил это, поместив липкую навигацию за пределы обертки! — person Hasintha Abeykoon; 27.05.2021
Спасибо, но применение overflow чего-либо к html и / или body в любой комбинации не решило проблему. — person Indigenuity; 11.01.2013
Извините, что у вас не получилось. Прежде чем я ответил, я провел быстрый тест, используя ваш сайт и применив свое предложение к вашему CSS. По крайней мере, проблема решена для стандартного браузера и браузера дельфинов на моем телефоне Android. — person Đinh Carabus; 11.01.2013
Из любопытства, что вы используете для изменения CSS в своих мобильных браузерах? — person Indigenuity; 11.01.2013
Не знаю, возможно ли это. Я также ищу мобильный браузер с каким-то плагином для разработчиков 🙂 В вашем случае я просто загрузил часть вашего сайта, чтобы внести изменения локально на свой компьютер, а затем загрузил его на свой веб-сервер — очень неприятный обходной путь;) — person Đinh Carabus; 11.01.2013
Работал у меня. eduardd.eu/projects/ezo (в нижнем колонтитуле от 480 до 992 пикселей возникла проблема с переполненным изображением женщина и полотенца) — person Eduard; 01.08.2015
Кто-нибудь знает, почему это работает, когда отдельно указывать body <> и html <> нет? — person hamncheez; 05.09.2017
Также необходимо добавить height:100%; , иначе вертикальная прокрутка не будет работать должным образом на страницах с загружаемыми изображениями (что приводит к увеличению высоты страницы). — person Arno van Oordt; 22.08.2019
Это сработало для меня, когда я также включил position: relative на body . — person George WS; 20.04.2021
Комментарий VictorS к принятый ответ заслуживает отдельного ответа, потому что это очень элегантное решение, которое действительно работает. И добавлю немного полезности. Виктор отмечает, что добавление position:fixed работает.
И это действительно так. Тем не менее, у него также есть небольшой побочный эффект, связанный с прокруткой вверх. position:absolute решает эту проблему, но заново вводит возможность прокрутки на мобильных устройствах. Если вы знаете свое окно просмотра (мой плагин для добавления окна просмотра в ), вы можете просто добавьте переключатель css для position .
body.modal-open < // block scroll for mobile; // causes underlying page to jump to top; // prevents scrolling on all screens overflow: hidden; position: fixed; >body.viewport-lg < // block scroll for desktop; // will not jump to top; // will not prevent scroll on mobile position: absolute; >Я также добавляю это, чтобы нижележащая страница не прыгала влево / вправо при отображении / скрытии модальных окон.
Что сработало для меня, так это поворот элемента, который должен был быть скрыт при переполнении, из position: absolute в position: fixed. К счастью. — person Chuck Le Butt; 13.01.2016
@WraithKenny — Если вы хотите, чтобы страница не перескакивала вверх на мобильном устройстве, вы можете использовать следующий хакерский / уродливый подход. Внутри вашей модальной функции убедитесь, что вы получили текущее смещение прокрутки, прежде чем что-либо делать, чем применить модальный стиль вместе, а также установить верхний край вашего тела, равный минусу текущего смещения. Убедитесь, что при удалении модального окна вы установили поле обратно на 0 и прокрутите страницу до исходного смещения. — person Emil Borconi; 25.03.2016
Это решение работает только в том случае, если ваш модальный контент умещается на экране, т.е. вам не нужно прокручивать сам модальный файл. — person Tobias; 12.08.2016
На моей странице есть и другие элементы с фиксированным и абсолютным позиционированием. Заставляя тело position:fixed or absolute также нарушать их положение. Не подходит / работает в моем случае 🙁 — person sohaiby; 14.09.2016
Я думаю, что это ответ на другой вопрос, чем я собирался задать, но он отвечает на него хорошо. Я хотел задать вопрос не о модальных окнах, а о любом произвольном элементе на переполненной странице. Так что position:fixed не подходит для многих из этих элементов. Однако в исходном вопросе это не указывалось, поэтому я все еще думаю, что этот ответ очень полезен. — person Indigenuity; 06.02.2018
Как утверждает @Indigenuity, это, по-видимому, вызвано тем, что браузеры анализируют тег . Чтобы решить эту проблему в источнике, попробуйте следующее: . В моих тестах это не позволяет пользователю уменьшать масштаб для просмотра переполненного содержимого и, как результат, также предотвращает панорамирование / прокрутку к нему.
Добавление initial-scale=1 к существующему метатегу области просмотра действительно решает проблему. Спасибо! — person JamesWilson; 05.06.2017
Это то, что на самом деле сработало у меня после того, как я попробовал все остальное. Большое спасибо ! — person Harsha Limaye; 03.07.2020
Это помогает, но пока не мешает горизонтальной полосе прокрутки на мобильных устройствах. — person Iggy; 18.06.2021
Вью, спасибо за это. Так было в моем случае. Только в медиа-запросах пробелы появляются внизу и справа. Ты, братан, заслуживаешь миллиона + и спасибо — person leipzy; 07.07.2021
Нет, наконец-то не сработало. В итоге я сделал математику и убедился, что div не шире, чем разрешено, css calc () мне очень помог, поскольку он позволяет смешивать относительную ширину (vw или%) и абсолютную ширину (px). — person LarS; 16.12.2017
Конечно, это своего рода обходной путь. Где-то еще что-то переливается, сейчас просто отрезано. Попробуйте добавить правило css: * <контур: сплошной красный 1px; >Если вы все еще не можете найти переполняющийся элемент, возможно, это вызвано каким-то запасом. Попробуйте добавить * и посмотрите, исчезнет ли переполнение. — person Waltur Buerk; 14.02.2018
Работает для меня. Интересно, что скрытый элемент меняет ширину тела. Однако для меня это относится ко ВСЕМ браузерам Safari, а не только к мобильным. Просто нужно было исправить ошибку Bootstrap 4 table-responsive . Это было решение. — person CunningFatalist; 01.03.2018
Я не уверен, что парень, который сказал, что это не работает, делал неправильно (возможно, не обновлял свой кеш). Это решение действительно работает. — person Tom Walker; 28.08.2018
Это единственное, что помогло мне скрыть абсолютно позиционированный элемент, который анимируется за кадром. — person diachedelic; 14.01.2019
Я не могу поверить, что это все еще проблема в 2019 году. Но вышеприведенное решение полностью сработало. Спасибо. — person staxim; 19.06.2019
Проблема с установкой overflow-x: hidden на body в том, что position: sticky перестает работать. — person powerbuoy; 27.02.2020
Это решение не работает на устройствах с IOS 13.0 и более поздних версий. Любое решение? — person Erum; 14.12.2020
Это действительно работает, но установка position: fixed на вашем теле заставляет вас прокручиваться наверх — person ThaoD5; 01.08.2016
Странно, но у меня это сработало и без фиксированной позиции. Только одно из всех решений здесь! — person Garavani; 15.01.2017
Только один, который сработал для меня, с использованием chrom и boostrap + angularJS — person kiwicomb123; 08.07.2017
Не трогайте область просмотра: Предполагая, что вы хотите добиться эффекта непрерывной черной полосы справа: #menubar не должно превышать 100%, настройте радиус границы так, чтобы правая сторона была квадрат и отрегулируйте отступ так, чтобы он выходил немного вправо. Измените следующее в вашем #menubar :
border-radius: 30px 0px 0px 30px; width: 100%; /*setting to 100% would leave a little space to the right */ padding: 0px 0px 0px 10px; /*fills the little gap*/ При настройке padding на 10 пикселей левое меню, конечно же, оставляет левое меню до края панели, вы можете поместить оставшиеся 40 пикселей в каждый из li , 20 пикселей с каждой стороны слева и Правильно:
Когда вы уменьшите размер браузера, вы все равно увидите белый фон: вместо этого поместите текстуру фона из вашего div в body . Или, в качестве альтернативы, отрегулируйте ширину меню навигации от 100% до более низкого значения с помощью медиа-запросов. Чтобы создать правильный макет, необходимо внести множество изменений в ваш код, я не уверен, что вы собираетесь делать, но приведенный выше код каким-то образом исправит вашу переполненную панель.
если вы используете box-sizing: border-box; , вы можете добавить отступ к div шириной 100%. — person CJT3; 06.01.2015
How To Fix Horizontal Scrollbar on Mobile When Using Elementor?
Did you test your Elementor website on a mobile device and discover that it goes all over the place when you start scrolling down? Is it showing strange gaps on the sides while moving your finger left and right and an unwanted horizontal scrollbar?
Step 4 – Click on “Update” to save changes.
That’s it. You solved the issue for this section.
Keep in mind here that this removes the overflow on all sides of the section. Thus, if you deliberately set some overflow on the top and bottom of the section, these will become hidden too.
Method 2: Fix Overflow Issue By Adding CSS Code
There are two cases in which this method would help you more than using the Elementor options:
- You need to keep the overflow on the top and bottom of the section while hiding it on the sides to avoid horizontal scroll;
- You have too many elements with the overflow issue, and you need a solution that would apply to your whole website.
Please follow these steps to remove overflow using a custom code:
Step 1 – Navigate to Appearance > Customize > Additional CSS;
Step 2 – Add the following CSS code:
Step 3 – Click “Publish” to save changes.
This method will remove all overflow on the left and right sides for all of your sections and pages. Also, it will keep your top and bottom overflow still visible where needed. You can see it in this video: