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

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

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

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

даже если я установил видовой экран на a удельная ширина в <head>:

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

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

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

15 102
css overflow viewport mobile-browser

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 hidden к обертке, потому что 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 тег, а затем установить установить мой 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

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

ссылке

3

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

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

2

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

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

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

#all-wrapper {
  overflow: hidden;
}

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

1