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

Question 1

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

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

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

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

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

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

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

Question 2

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

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

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

Question 3

пытаться

html, body {
  overflow-x:hidden 
}

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

body {
  overflow-x:hidden 
}

Question 4

Комментарий 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;
}

Question 5

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

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

Question 6

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

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

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

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

Question 7

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

работает на iOS9

Question 8

Не трогайте область просмотра: <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% до более низкого значения с помощью медиа-запросов. Чтобы создать правильный макет, необходимо внести множество изменений в ваш код, я не уверен, что вы собираетесь делать, но приведенный выше код каким-то образом исправит вашу переполненную панель.

Question 9

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

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

Question 10

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

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

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

Question 11

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

Question 12

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

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

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

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

  #wrapper {
    overflow: hidden;
  }

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

Question 13

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

Question 14

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

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

Question 15

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

#all-wrapper {
  overflow: hidden;
}

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

Question 16

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

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

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

Question 17

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

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