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

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

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

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

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

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

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

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

109 голосов | спросил Indigenuity 11 Jam1000000amFri, 11 Jan 2013 05:07:31 +040013 2013, 05:07:31

15 ответов


0

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

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

ответил Indigenuity 11 Jam1000000amFri, 11 Jan 2013 07:10:49 +040013 2013, 07:10:49
0

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;
}
ответил Brad 14 J000000Monday14 2014, 01:09:00
0

попробовать

html, body {
  overflow-x:hidden 
} 

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

body {
  overflow-x:hidden 
}
ответил subarachnid 11 Jam1000000amFri, 11 Jan 2013 06:41:51 +040013 2013, 06:41:51
0
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

работает на iOS9

ответил ollio 21 stEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 21 Sep 2015 18:02:09 +0300 2015, 18:02:09
0

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

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

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

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

ответил Tempurturtul 18 PMpMon, 18 Apr 2016 14:52:14 +030052Monday 2016, 14:52:14
0

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

html, body {
  position:relative;
  overflow-x:hidden;
}
ответил Waltur Buerk 4 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 04 Sep 2017 17:49:11 +0300 2017, 17:49:11
0

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

Сначала я должен был обернуть html-контент во внешний div:

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

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

  #wrapper {
    overflow: hidden;
  }

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

ответил spaghetticode 16 +03002015-10-16T12:17:16+03:00312015bEurope/MoscowFri, 16 Oct 2015 12:17:16 +0300 2015, 12:17:16
0

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

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

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

ответил Anne 11 Jam1000000amFri, 11 Jan 2013 08:43:50 +040013 2013, 08:43:50
0

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

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

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

ответил MBurnette 23 MaramSat, 23 Mar 2013 07:46:53 +04002013-03-23T07:46:53+04:0007 2013, 07:46:53
0

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

ответил Kwok Pan Fung 23 J000000Thursday15 2015, 19:26:36
0

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

ответил vikas etagi 16 WedEurope/Moscow2015-12-16T17:45:39+03:00Europe/Moscow12bEurope/MoscowWed, 16 Dec 2015 17:45:39 +0300 2015, 17:45:39
0

Как сказал 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;
}

Ссылка

ответил Skylin R 9 J0000006Europe/Moscow 2016, 15:08:21
0
  

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

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

ответил Isaac F 29 22016vEurope/Moscow11bEurope/MoscowTue, 29 Nov 2016 14:46:18 +0300 2016, 14:46:18
0

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

#all-wrapper {
  overflow: hidden;
}

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

ответил highfellow 14 Jpm1000000pmSat, 14 Jan 2017 13:00:57 +030017 2017, 13:00:57
0

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

.modal {
    -webkit-overflow-scrolling: auto!important;
}
ответил Tobias 12 AM00000090000002631 2016, 09:28:26

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132