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

143

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

При просмотре в браузере настольного компьютера черная строка меню правильно распространяется только до края окна, поскольку 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 Родство
источник
1
Это особенно актуально для iOS9
Чак Ле Батт,

Ответы:

286

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

Оказывается , что браузеры , которые анализируют в <meta name="viewport">тег просто игнорировать overflowна атрибуты htmlи bodyтегах.

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

Родство
источник
44
Я обнаружил , что в дополнение к установив overflowдля hidden, я должен был установить , positionчтобы fixed...
Victor S
18
Добавление позиции к фиксированной не позволяет мне прокручивать!
теоретизируйте
5
Я попробовал, я поместил весь свой код в div и дал ему overflow-x: hidden, но не работает, я добавляю <meta name = "viewport" content = "width = device-width, initial-scale = 1"> тоже, но ничего не изменилось: / любые идеи?
4
@leepowers overflow-x: hiddenвсе еще не работает у меня даже после того, как я добавлю этот метатег. Не могли бы вы поделиться ссылкой на ваш сайт, где он работает?
юпитер или 01
4
Привет, банда, когда я обнаружил, что position:relativeэто тоже работает.
Thomas Valadez
86

пытаться

html, body {
  overflow-x:hidden 
}

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

body {
  overflow-x:hidden 
}
субарахнид
источник
7
Спасибо, но применение overflowчего-либо htmlи / или bodyв любой комбинации не решило проблему.
Indigenuity
Извините, что у вас не получилось. Прежде чем я ответил, я быстро протестировал ваш сайт и применил свое предложение к вашему CSS. По крайней мере, проблема исправлена ​​для стандартного браузера и браузера дельфинов на моем телефоне Android.
subarachnid
3
Работал у меня. eduardd.eu/projects/ezo (в нижнем колонтитуле от 480 до 992 пикселей возникла проблема с переполненным изображением женщины и полотенец)
Эдуард
2
Кто-нибудь знает, почему это работает, когда отдельно указывать body {} и html {} нет?
Hamncheez
1
Также необходимо добавить height:100%;, иначе вертикальная прокрутка не будет работать должным образом на страницах с загружаемыми изображениями (которые увеличивают высоту страницы).
Арно ван Оордт,
69

Комментарий 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;
}
Брэд
источник
2
Есть ли способ заставить мобильную часть не прыгать наверх?
WraithKenny
1
Что сработало для меня, так это поворот элемента, который должен был быть скрыт путем переполнения, из position: absolute в position: fixed. К счастью.
Чак Ле Батт,
1
@WraithKenny - Если вы хотите, чтобы страница не перескакивала вверх на мобильном устройстве, вы можете использовать следующий хакерский / уродливый подход. Внутри вашей модальной функции убедитесь, что вы получили текущее смещение прокрутки, прежде чем что-либо делать, чем применять модальный стиль вместе, а также установить верхний край вашего тела, равный минусу текущего смещения. Убедитесь, что при удалении модального окна вы установили поле обратно на 0 и прокрутите страницу до исходного смещения.
Эмиль Боркони
2
Это решение работает только в том случае, если содержимое вашего модального окна умещается на экране, т.е. вам не нужно прокручивать сам модальный экран.
Тобиас
На моей странице также есть другие фиксированные и абсолютные элементы. Заставляя тело position:fixed or absoluteменять свое положение, тоже. Не подходит / работает в моем случае :(
sohaiby
32

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

html, body {
  position:relative;
  overflow-x:hidden;
}
Вальтур Бюрк
источник
1
Вроде работает. Но есть ли у вас объяснение, почему это работает?
LarS
Нет, наконец-то не сработало. В итоге я сделал математику и убедился, что div не шире, чем разрешено, css calc () мне очень помог, поскольку он позволяет смешивать относительную ширину (vw или%) и абсолютную ширину (px).
LarS
Конечно, это своего рода обходной путь. Где-то еще что-то переливается, сейчас просто отрезано. Попробуйте добавить правило css: * {контур: сплошной красный 1px; } Если вы все еще не можете найти переполняющийся элемент, возможно, это связано с каким-то запасом. Попробуйте добавить * {margin: 0! ВАЖНО; } и посмотрите, исчезнет ли переполнение.
Waltur Buerk
Работает для меня. Интересно, что скрытый элемент меняет ширину тела. Для меня, однако, это относится ко ВСЕМ браузерам Safari, а не только к мобильным. Просто нужно было исправить ошибку Bootstrap 4 table-responsive. Это было решение.
CunningFatalist 01
2
Не могу поверить, что это все еще проблема в 2019 году. Но вышеприведенное решение полностью сработало. Спасибо.
staxim
29

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

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

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

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

Темпурттул
источник
Добавление initial-scale=1к существующему метатегу области просмотра действительно решает проблему. Благодарность!
Джеймс Энтони Уилсон
7
Для меня это было то, minimum-scale=1что исправило это
jpenna
Это то, что на самом деле сработало у меня после того, как я попробовал все остальное. Большое спасибо !
Харша Лима,
16 
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

работает на iOS9

оллио
источник
3
Это действительно работает, но установка position: fixed на вашем теле заставляет вас прокручивать вверх
ThaoD5, 01
1
Странно, но у меня это сработало и без фиксированной позиции. Только одно из всех решений здесь!
Гаравани
Только один, который сработал для меня, с использованием chrom и boostrap + angularJS
kiwicomb123
6

Не трогайте область просмотра: <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*/

При настройке на 10 paddingпикселей, конечно, левое меню остается к краю панели, вы можете поместить оставшиеся 40 пикселей на каждую из них li, по 20 пикселей с каждой стороны слева и справа:

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

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

Энн
источник
если вы используете, box-sizing: border-box;вы можете добавить отступ к div шириной 100%.
Чарльз Джон Томпсон III
6

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

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

Исаак Ф
источник
Это сработало для меня. Побочным эффектом было то, что у меня две полосы прокрутки вместо одной. Решением было сделать это overflow: hiddenвместо overflow-x: hidden. Работает на мобильных Safari, Chrome, IE11 на OSX и Win.
pop
4

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

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

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

MBurnette
источник
4

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

Квок Пан Фунг
источник
4

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

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

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

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

  #wrapper {
    overflow: hidden;
  }

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

спагеттикод
источник
Чем это отличается от ответа @ Indigenuity?
Ян Кемп
3
@ian Kemp overflow: hidden! = overflow-x: hidden
spaghetticode
3

Я решил проблему, используя 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

викас этаги
источник
3

Как сказал субарахнид, 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;
}

Ссылка на сайт

Скайлин Р
источник
1

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

#all-wrapper {
  overflow: hidden;
}

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

высокий товарищ
источник
1

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

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

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

Jirayu L
источник
0

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

.modal {
    -webkit-overflow-scrolling: auto!important;
}
Тобиас
источник