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

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

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

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

даже если я установил viewport в a специфическая ширина в <head>:

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

сайт расширяется до 1100px, но по-прежнему имеет пробелы за пределами 1100.

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

102
css mobile-browser overflow viewport

15 ответов

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

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

194

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

Виктор отмечает, добавив 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;
}
63

попробовать

html, body {
  overflow-x:hidden 
}

вместо

body {
  overflow-x:hidden 
}
54
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

работает на iOS9

15

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

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

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

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

13

это самое простое решение для решения горизонтальной прокрутки в Safari.

html, body {
  position:relative;
  overflow-x:hidden;
}
8

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

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

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

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

  #wrapper {
    overflow: hidden;
  }

и это решило проблему.

5

сохранить нетронутым просмотра: <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 к 10px конечно выходит левое меню к краю бар, вы можете поставить оставшиеся 40 пикселей для каждого li, в 20px С каждой стороны слева и справа:

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

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

4

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

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

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

4

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

4

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

Как сказал subarachnid переполнение-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;
}

ссылке

3

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

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

2

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

.modal {
    -webkit-overflow-scrolling: auto!important;
}
1

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

#all-wrapper {
  overflow: hidden;
}

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

1