Overflow-x: hidden не предотвращает переполнение содержимого в мобильных браузерах

У меня есть веб-сайт здесь.

При просмотре в браузере настольного компьютера черная строка меню правильно распространяется только до края окна, поскольку body имеет overflow-x:hidden.

В любом мобильном браузере, будь то Android или iOS, черная строка меню отображается во всю ширину, что приводит к появлению пробелов в правой части страницы. Насколько я могу судить, этот пробел даже не является частью тегов html или body.

Даже если я установил для окна просмотра определенную ширину в <head>:

<meta name="viewport" content="width=1100, initial-scale=1">

Сайт расширяется до 1100 пикселей, но все еще имеет пробел, превышающий 1100 пикселей.

Что мне не хватает? Как мне сохранить размер окна просмотра до 1100 и отключить переполнение?


css overflow viewport mobile-browser
person Indigenuity    schedule 11.01.2013    source источник
comment
Это особенно актуально для iOS9.   -  person Chuck Le Butt    schedule 12.01.2016

Ответы (17)


arrow_upward
318
arrow_downward

Создание div-оболочки сайта внутри <body> и применение overflow-x:hidden к оболочке вместо <body> или <html> устранило проблему.

Похоже, что браузеры, разбирающие тег <meta name="viewport">, просто игнорируют атрибуты overflow в тегах html и body.

Примечание. Вам также может потребоваться добавить position: relative в div-оболочку.

person Indigenuity    schedule 11.01.2013
comment
Я обнаружил, что помимо установки overflow на hidden, мне нужно было установить position на _4 _... - person Victor S; 22.02.2013
comment
Для меня просто добавление overflow-x: hidden к первому div внутри body работало нормально. Не нужно добавлять еще div, просто попробуйте установить его на крайний div. - person Gchtr; 12.08.2013
comment
Добавление позиции к фиксированной не дает мне возможности прокручивать! - person theorise; 25.10.2013
comment
Добавление div-оболочки с overflow: hidden помогло мне в iOS7! - person Jason Farnsworth; 03.03.2014
comment
Я попробовал, я поместил весь свой код в div и дал ему overflow-x: hidden, но не работает, я также добавил ‹meta name = viewport content = width = device-width, initial-scale = 1›, но ничего не изменилось :/ Любые идеи? - person ; 25.10.2014
comment
Создание оболочки div вокруг всего в ‹body› работает. - person Vennsoh; 03.06.2015
comment
Не работал у меня на MobileSafari (iOS9), пока я не убедился, что метатег области просмотра выглядит следующим образом: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> - проблема здесь: изменение основного контейнера содержимого может вызвать большое изменение высоты документа, что, в свою очередь, может вызвать странное поведение масштабирования . - person leepowers; 18.11.2015
comment
@leepowers overflow-x: hidden у меня все еще не работает даже после того, как я добавлю этот метатег. Не могли бы вы поделиться ссылкой на ваш сайт, где он работает? - person jupiteror; 01.12.2015
comment
переполнение: скрыто; высота: 100%; вместе работает для меня - person craigstar; 15.04.2016
comment
Определенно ^, если вы обнаружите элемент за пределами этой области, убедитесь, что он не установлен на absolute, а вместо этого установлен на fixed. - person JoeCodeCreations; 19.04.2017
comment
@theorise ничего не работало, кроме position: fixed. спасибо ‹33 - person oldboy; 20.05.2017
comment
Привет, банда, когда я обнаружил, что position:relative тоже работает. - person Thomas Valadez; 11.04.2018
comment
overflow: scroll, если вы хотите, чтобы пользователь по-прежнему мог видеть переполненный контент - person user3666653; 04.11.2019
comment
Я пробовал это для своего ионного приложения (только для устройств iOs), но он не работает ни для одной позиции содержимого тела. - person KuldipKoradia; 05.11.2019
comment
Ты спас меня, чувак, Бог знает, что я работаю над этой проблемой с последних 3 часов Спасибо 1M - person NoorNoori; 06.02.2020
comment
Исправлена ​​проблема и для меня. В моем случае относительное позиционирование оболочки div не требовалось. - person pinglock; 23.08.2020
comment
Обновление - в конце концов, относительное позиционирование было важно! Без него альбомная ориентация в мобильных браузерах нарушала макет. - person pinglock; 27.08.2020
comment
te amo breoooooh ‹33333333333333333333333333333333333333333333333 - person k0o; 25.11.2020
comment
Привет, отличный ответ, хотя это решает начальную проблему, но для любого из вас, у кого есть липкая навигация, она больше не прилипает! Я решил это, поместив липкую навигацию за пределы обертки! - person Hasintha Abeykoon; 27.05.2021

arrow_upward
95
arrow_downward

пытаться

html, body {
  overflow-x:hidden 
}

вместо просто

body {
  overflow-x:hidden 
}
person Đinh Carabus    schedule 11.01.2013
comment
Спасибо, но применение overflow чего-либо к html и / или body в любой комбинации не решило проблему. - person Indigenuity; 11.01.2013
comment
Извините, что у вас не получилось. Прежде чем я ответил, я провел быстрый тест, используя ваш сайт и применив свое предложение к вашему CSS. По крайней мере, проблема решена для стандартного браузера и браузера дельфинов на моем телефоне Android. - person Đinh Carabus; 11.01.2013
comment
Из любопытства, что вы используете для изменения CSS в своих мобильных браузерах? - person Indigenuity; 11.01.2013
comment
Не знаю, возможно ли это. Я также ищу мобильный браузер с каким-то плагином для разработчиков :) В вашем случае я просто загрузил часть вашего сайта, чтобы внести изменения локально на свой компьютер, а затем загрузил его на свой веб-сервер - очень неприятный обходной путь;) - person Đinh Carabus; 11.01.2013
comment
Работал у меня. eduardd.eu/projects/ezo (в нижнем колонтитуле от 480 до 992 пикселей возникла проблема с переполненным изображением женщина и полотенца) - person Eduard; 01.08.2015
comment
Кто-нибудь знает, почему это работает, когда отдельно указывать body {} и html {} нет? - person hamncheez; 05.09.2017
comment
Также необходимо добавить height:100%;, иначе вертикальная прокрутка не будет работать должным образом на страницах с загружаемыми изображениями (что приводит к увеличению высоты страницы). - person Arno van Oordt; 22.08.2019
comment
Это сработало для меня, когда я также включил position: relative на body. - person George WS; 20.04.2021

arrow_upward
74
arrow_downward

Комментарий VictorS к принятый ответ заслуживает отдельного ответа, потому что это очень элегантное решение, которое действительно работает. И добавлю немного полезности.

Виктор отмечает, что добавление position:fixed работает.

body.modal-open {
    overflow: hidden;
    position: fixed;
}

И это действительно так. Тем не менее, у него также есть небольшой побочный эффект, связанный с прокруткой вверх. position:absolute решает эту проблему, но заново вводит возможность прокрутки на мобильных устройствах.

Если вы знаете свое окно просмотра (мой плагин для добавления окна просмотра в <body>), вы можете просто добавьте переключатель 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; 
}

Я также добавляю это, чтобы нижележащая страница не прыгала влево / вправо при отображении / скрытии модальных окон.

body {
    // STOP MOVING AROUND!
    overflow-x: hidden;
    overflow-y: scroll !important;
}
person Brad    schedule 13.07.2014
comment
Есть ли способ заставить мобильную часть не прыгать наверх? - person WraithKenny; 27.05.2015
comment
Что сработало для меня, так это поворот элемента, который должен был быть скрыт при переполнении, из position: absolute в position: fixed. К счастью. - person Chuck Le Butt; 13.01.2016
comment
@WraithKenny - Если вы хотите, чтобы страница не перескакивала вверх на мобильном устройстве, вы можете использовать следующий хакерский / уродливый подход. Внутри вашей модальной функции убедитесь, что вы получили текущее смещение прокрутки, прежде чем что-либо делать, чем применить модальный стиль вместе, а также установить верхний край вашего тела, равный минусу текущего смещения. Убедитесь, что при удалении модального окна вы установили поле обратно на 0 и прокрутите страницу до исходного смещения. - person Emil Borconi; 25.03.2016
comment
Это решение работает только в том случае, если ваш модальный контент умещается на экране, т.е. вам не нужно прокручивать сам модальный файл. - person Tobias; 12.08.2016
comment
На моей странице есть и другие элементы с фиксированным и абсолютным позиционированием. Заставляя тело position:fixed or absolute также нарушать их положение. Не подходит / работает в моем случае :( - person sohaiby; 14.09.2016
comment
Я думаю, что это ответ на другой вопрос, чем я собирался задать, но он отвечает на него хорошо. Я хотел задать вопрос не о модальных окнах, а о любом произвольном элементе на переполненной странице. Так что position:fixed не подходит для многих из этих элементов. Однако в исходном вопросе это не указывалось, поэтому я все еще думаю, что этот ответ очень полезен. - person Indigenuity; 06.02.2018

arrow_upward
36
arrow_downward

Как утверждает @Indigenuity, это, по-видимому, вызвано тем, что браузеры анализируют тег <meta name="viewport">.

Чтобы решить эту проблему в источнике, попробуйте следующее:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.

В моих тестах это не позволяет пользователю уменьшать масштаб для просмотра переполненного содержимого и, как результат, также предотвращает панорамирование / прокрутку к нему.

person Tempurturtul    schedule 18.04.2016
comment
Добавление initial-scale=1 к существующему метатегу области просмотра действительно решает проблему. Спасибо! - person JamesWilson; 05.06.2017
comment
Для меня это был minimum-scale=1, который исправил это - person jpenna; 23.07.2018
comment
Это то, что на самом деле сработало у меня после того, как я попробовал все остальное. Большое спасибо ! - person Harsha Limaye; 03.07.2020
comment
Это помогает, но пока не мешает горизонтальной полосе прокрутки на мобильных устройствах. - person Iggy; 18.06.2021
comment
Вью, спасибо за это. Так было в моем случае. Только в медиа-запросах пробелы появляются внизу и справа. Ты, братан, заслуживаешь миллиона + и спасибо - person leipzy; 07.07.2021

arrow_upward
35
arrow_downward

Это простейшее решение проблемы горизонтальной прокрутки в Safari.

html, body {
  position:relative;
  overflow-x:hidden;
}
person Waltur Buerk    schedule 04.09.2017
comment
Вроде работает. Но есть ли у вас объяснение, почему это работает? - person LarS; 14.12.2017
comment
Нет, наконец-то не сработало. В итоге я сделал математику и убедился, что div не шире, чем разрешено, css calc () мне очень помог, поскольку он позволяет смешивать относительную ширину (vw или%) и абсолютную ширину (px). - person LarS; 16.12.2017
comment
Конечно, это своего рода обходной путь. Где-то еще что-то переливается, сейчас просто отрезано. Попробуйте добавить правило css: * {контур: сплошной красный 1px; } Если вы все еще не можете найти переполняющийся элемент, возможно, это вызвано каким-то запасом. Попробуйте добавить * {margin: 0! ВАЖНО; } и посмотрите, исчезнет ли переполнение. - person Waltur Buerk; 14.02.2018
comment
Работает для меня. Интересно, что скрытый элемент меняет ширину тела. Однако для меня это относится ко ВСЕМ браузерам Safari, а не только к мобильным. Просто нужно было исправить ошибку Bootstrap 4 table-responsive. Это было решение. - person CunningFatalist; 01.03.2018
comment
Я не уверен, что парень, который сказал, что это не работает, делал неправильно (возможно, не обновлял свой кеш). Это решение действительно работает. - person Tom Walker; 28.08.2018
comment
Это единственное, что помогло мне скрыть абсолютно позиционированный элемент, который анимируется за кадром. - person diachedelic; 14.01.2019
comment
Я не могу поверить, что это все еще проблема в 2019 году. Но вышеприведенное решение полностью сработало. Спасибо. - person staxim; 19.06.2019
comment
Проблема с установкой overflow-x: hidden на body в том, что position: sticky перестает работать. - person powerbuoy; 27.02.2020
comment
Это решение не работает на устройствах с IOS 13.0 и более поздних версий. Любое решение? - person Erum; 14.12.2020

arrow_upward
16
arrow_downward 

body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

работает на iOS9

person ollio    schedule 21.09.2015
comment
Это действительно работает, но установка position: fixed на вашем теле заставляет вас прокручиваться наверх - person ThaoD5; 01.08.2016
comment
Странно, но у меня это сработало и без фиксированной позиции. Только одно из всех решений здесь! - person Garavani; 15.01.2017
comment
Только один, который сработал для меня, с использованием chrom и boostrap + angularJS - person kiwicomb123; 08.07.2017

arrow_upward
6
arrow_downward

Не трогайте область просмотра: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Предполагая, что вы хотите добиться эффекта непрерывной черной полосы справа: #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 пикселей с каждой стороны слева и Правильно:

.menuitem {
display: block;
padding: 0px 20px;
}

Когда вы уменьшите размер браузера, вы все равно увидите белый фон: вместо этого поместите текстуру фона из вашего div в body. Или, в качестве альтернативы, отрегулируйте ширину меню навигации от 100% до более низкого значения с помощью медиа-запросов. Чтобы создать правильный макет, необходимо внести множество изменений в ваш код, я не уверен, что вы собираетесь делать, но приведенный выше код каким-то образом исправит вашу переполненную панель.

person Anne    schedule 11.01.2013
comment
если вы используете box-sizing: border-box;, вы можете добавить отступ к div шириной 100%. - person CJT3; 06.01.2015

arrow_upward
6
arrow_downward

Создание div-оболочки сайта внутри тела и применение overflow-> x: hidden к оболочке INSTEAD тела или html устранило проблему.

Это сработало для меня после добавления position: relative в оболочку.

person Isaac F    schedule 29.11.2016
comment
Это сработало для меня. Побочным эффектом было то, что у меня две полосы прокрутки вместо одной. Решением было сделать overflow: hidden вместо overflow-x: hidden. Работает на мобильных Safari, Chrome, IE11 на OSX и Win. - person pop; 14.06.2019

arrow_upward
4
arrow_downward

Добавление оболочки <div> вокруг всего вашего контента действительно будет работать. Хотя семантически "неприглядно", я добавил div с классом overflowWrap прямо внутри тега body, а затем установил свой CSS следующим образом:

html, body, .overflowWrap {
overflow-x: hidden;
}

Может быть, сейчас перебор, но работает как шарм!

person MBurnette    schedule 23.03.2013

arrow_upward
4
arrow_downward

Я столкнулся с той же проблемой с устройствами Android, но не с устройствами iOS. Удалось разрешить, указав position: relative во внешнем div абсолютно позиционированных элементов (с переполнением: скрыто для внешнего div)

person Kwok Pan Fung    schedule 23.07.2015

arrow_upward
4
arrow_downward

Ни одно предыдущее решение не помогло мне, мне пришлось смешать их, и проблема была исправлена ​​также на старых устройствах (iphone 3).

Во-первых, мне пришлось обернуть html-контент во внешний div:

<html>
  <body>
    <div id="wrapper">... old html goes here ...</div>
  </body>
</html>

Затем мне пришлось применить скрытое переполнение к оболочке, потому что overflow-x не работал:

  #wrapper {
    overflow: hidden;
  }

и это устранило проблему.

person spaghetticode    schedule 16.10.2015
comment
Чем это отличается от ответа @ Indigenuity? - person Ian Kemp; 02.11.2015
comment
@ian Kemp переполнение: скрыто! = переполнение-x: скрыто - person spaghetticode; 19.11.2015

arrow_upward
3
arrow_downward

Я решил проблему, используя overflow-x: hidden; следующее

@media screen and (max-width: 441px){

#end_screen { (NOte:-the end_screen is the wrapper div for all other div's inside it.)
  overflow-x: hidden;
   }
 }

структура выглядит следующим образом

1st div end_screen >> inside it >> end_screen_2(div) >> inside it >> end_screen_2.

'end_screen is the wrapper of end_screen_1 and end_screen_2 div's

person vikas etagi    schedule 16.12.2015

arrow_upward
3
arrow_downward

Как сказал субарахнид, overflow-x, скрытый как для тела, так и для html, работал Вот рабочий пример

**HTML**
<div class="contener">
  <div class="menu">
  das
  </div>
  <div class="hover">
    <div class="img1">
    First Strip
    </div>
     <div class="img2">
    Second Strip
    </div>
</div>
</div>
<div class="baner">
dsa
</div>

**CSS**
body, html{
  overflow-x:hidden;
}
body{
  margin:0;
}
.contener{
  width:100vw;
}
.baner{
   background-image: url("http://p3cdn4static.sharpschool.com/UserFiles/Servers/Server_3500628/Image/abstract-art-mother-earth-1.jpg");
   width:100vw;
   height:400px;
   margin-left:0;
   left:0;
}
.contener{
  height:100px;
}
.menu{
  display:flex;
  background-color:teal;
  height:100%;
  justify-content:flex-end;
  align:content:bottom;
}
.img1{
  width:150px;
  height:25px;
  transform:rotate(45deg);
  background-color:red;
  position:absolute;
  top:40px;
  right:-50px;
  line-height:25px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  text-align:center;
  transition:all 0.4s;
}
.img2{
  width:190px;
  text-align:center;
  transform:rotate(45deg);
  background-color:#333;
  position:absolute;
  height:25px;
  line-height:25px;
  top:55px;
  right:-50px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  transition:all 0.4s;
}
.hover{
  overflow:hidden;
}
.hover:hover .img1{
  background-color:#333;
  transition:all 0.4s;
}
.hover:hover .img2{
  background-color:blue;
  transition:all 0.4s;
}

Ссылка

person Skylin R    schedule 09.06.2016

arrow_upward
2
arrow_downward

Я пробовал много способов ответов в этой теме, в основном работает, но получил некоторый побочный эффект, например, если я использую overflow-x на body,html, это может замедлить / заморозить страницу, когда пользователи прокручивают вниз на мобильном устройстве.

использование position: fixed в оболочке / div внутри тела тоже хорошо, но когда у меня есть меню и я использую анимированный прокрутку с помощью Javascript, он не работает.

Итак, я решил использовать touch-action: pan-y pinch-zoom в оболочке / div внутри тела. Задача решена.

person Jirayu Limjinda    schedule 24.11.2019

arrow_upward
2
arrow_downward

самый простой способ решить эту проблему, добавить

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

person Phakamani Xulu    schedule 15.06.2021

arrow_upward
1
arrow_downward

Я просто работал над этим несколько часов, пробуя различные комбинации вещей с этой и других страниц. В конце концов, у меня сработало создание div-оболочки сайта, как предлагается в принятом ответе, но для скрытия обоих переполнений, а не только переполнения x. Если я оставлю overflow-y при прокрутке, я получу страницу, которая прокручивается только по вертикали на несколько пикселей, а затем останавливается.

#all-wrapper {
  overflow: hidden;
}

Просто этого было достаточно, без установки чего-либо на body или html-элементы.

person highfellow    schedule 14.01.2017

arrow_upward
0
arrow_downward

Единственный способ исправить эту проблему для моего модального загрузочного окна (содержащего форму) - это добавить следующий код в мой CSS:

.modal {
    -webkit-overflow-scrolling: auto!important;
}
person Tobias    schedule 12.08.2016