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

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

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

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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

попробовать

html, body {
  overflow-x:hidden 
}

вместо

body {
  overflow-x:hidden 
}

Ответ 3

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

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

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

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

Если вы знаете свой viewport (мой плагин для добавления видового экрана в <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;
}

Ответ 4

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

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

Ответ 5

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

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

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

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

Ответ 6

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

работает на iOS9

Ответ 7

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

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

Ответ 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*/

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

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

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

Ответ 9

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

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

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

Ответ 10

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

Ответ 11

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

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

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

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

  #wrapper {
    overflow: hidden;
  }

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

Ответ 12

Также возникает проблема с отображением тела и html: table;. Переключение дисплея на блок исправляет его.

Ответ 13

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

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

#end_screen { (NOte:-the end_screen is the wrapper div for all other div 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

Ответ 14

Как субарахник сказал, что переполнение-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;
}

Ссылка

Ответ 15

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

#all-wrapper {
  overflow: hidden;
}

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

Ответ 16

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

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

Ответ 17

Вы можете просто предотвратить прокрутку на теле, используя preventDefault()

function stopBodyScroll() {
    var _overlay = $('.yourOverlayer')[0];
    var _clientY = null; // remember Y position on touch start

    _overlay.addEventListener('touchstart', function (event) {
        if (event.targetTouches.length === 1) {
            // detect single touch
            _clientY = event.targetTouches[0].clientY;
        }
    }, false);

    _overlay.addEventListener('touchmove', function (event) {
        if (event.targetTouches.length === 1) {
            // detect single touch
            disableRubberBand(event);
        }
    }, false);

    function disableRubberBand(event) {
        var clientY = event.targetTouches[0].clientY - _clientY;

        if (_overlay.scrollTop === 0 && clientY > 0) {
            // element is at the top of its scroll
            event.preventDefault();
        }

        if (isOverlayTotallyScrolled() && clientY < 0) {
            //element is at the top of its scroll
            event.preventDefault();
        }
    }

    function isOverlayTotallyScrolled() {
        return _overlay.scrollHeight - _overlay.scrollTop <= _overlay.clientHeight;
    }
}