Overflow-x: скрытый не предотвращает переполнение контента в мобильных браузерах
У меня есть сайт здесь.
При просмотре в настольном браузере черная строка меню правильно распространяется только до края окна, поскольку body имеет overflow-x:hidden,
В любом мобильном браузере, будь то Android или iOS, черная строка меню отображает свою полную ширину, что приводит к появлению пробелов в правой части страницы. Насколько я могу судить, этот пробел даже не является частью html или же body теги.
Даже если я установлю область просмотра на определенную ширину в <head>:
<meta name="viewport" content="width=1100, initial-scale=1">
Сайт расширяется до 1100 пикселей, но все еще имеет пробелы после 1100.
Что мне не хватает? Как мне сохранить область просмотра до 1100 и отсечь переполнение?
22 ответа
Создание div обертки сайта внутри body и применяя overflow-x:hidden в обертку ВМЕСТО body или же html исправил проблему.
Похоже, что браузеры, которые разбирают <meta name="viewport"> тег просто игнорировать overflow атрибуты на html а также body теги.
Пытаться
html, body {
overflow-x:hidden
}
вместо просто
body {
overflow-x:hidden
}
Victor S о принятом ответе заслуживает того, чтобы быть его собственным ответом, потому что это очень элегантное решение, которое действительно работает. И я добавлю немного к его полезности.
Виктор отмечает добавление 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;
}
Как утверждает @Indigenuity, это, по-видимому, вызвано тем, что браузеры анализируют <meta name="viewport"> тег.
Чтобы решить эту проблему в источнике, попробуйте следующее:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">,
В моих тестах это не позволяет пользователю уменьшить масштаб для просмотра переполненного контента, и в результате предотвращает панорамирование / прокрутку к нему.
Это самое простое решение для решения горизонтальной прокрутки в Safari.
html, body {
position:relative;
overflow-x:hidden;
}
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;
работает на iOS9
Создание div обертки сайта внутри тела и применение overflow->x:hidden к обертке INSTEAD тела или html решило проблему.
Это сработало для меня после добавления position: relative к обертке.
Держите область просмотра нетронутой: <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 к каждому из li20px с каждой стороны слева и справа:
.menuitem {
display: block;
padding: 0px 20px;
}
Когда вы уменьшите размер браузера, вы по-прежнему найдете белый фон: поместите текстуру фона вместо div в body, Или, в качестве альтернативы, настройте ширину навигационного меню от 100% до более низкого значения с помощью медиа-запросов. В вашем коде нужно внести множество корректировок для создания правильного макета, я не уверен, что вы собираетесь делать, но приведенный выше код каким-то образом исправит вашу переполненную панель.
Ни одно предыдущее решение не помогло мне, мне пришлось смешать их, и проблема была исправлена также на старых устройствах (iphone 3).
Сначала я должен был обернуть содержимое HTML во внешний div:
<html>
<body>
<div id="wrapper">... old html goes here ...</div>
</body>
</html>
Затем мне пришлось применить переполнение, скрытое к оболочке, потому что overflow-x не работал:
#wrapper {
overflow: hidden;
}
и это решило проблему.
Я столкнулся с той же проблемой с устройствами Android, но не с устройствами iOS. Управляется разрешением путем указания позиции: относительный во внешнем элементе абсолютно позиционированных элементов (с переполнением: скрытый для внешнего элемента)
Добавление обертки <div> вокруг всего вашего контента действительно будет работать. Хотя семантически "icky", я добавил div с классом overflowWrap прямо внутри body тег, а затем установить установить мой CSS следующим образом:
html, body, .overflowWrap {
overflow-x: hidden;
}
Может быть, излишне, но работает как шарм!
Я решил проблему, используя 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
Как сказал 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;
}
самый простой способ решить эту проблему, добавить
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
Я пробовал много способов ответов в этой теме, в основном работает, но получил некоторый побочный эффект, например, если я использую overflow-x в body,html это может замедлить / заморозить страницу, когда пользователи прокручивают вниз на мобильном телефоне.
использовать position: fixed на оболочке /div внутри тела тоже хорошо, но когда у меня есть меню и я использую Javascript, нажимаю анимированную прокрутку в какой-то раздел, это не работает.
Итак, я решил использовать touch-action: pan-y pinch-zoomна оболочке /div внутри тела. Проблема решена.
Я просто работал над этим в течение нескольких часов, пробуя различные комбинации вещей из этой и других страниц. В конце концов, у меня сработало создание div-обертки для сайта, как предложено в принятом ответе, но установка обоих переполнений скрытыми, а не просто переполнением х. Если я оставлю overflow-y при прокрутке, я получу страницу, которая прокручивается только на несколько пикселей по вертикали и затем останавливается.
#all-wrapper {
overflow: hidden;
}
Просто этого было достаточно, не устанавливая ничего для тела или HTML-элементов.
Установка для overflow-x значения «clip» вместо «hidden» также предотвращает нежелательную прокрутку на сенсорных устройствах, ручках wacom, колесе прокрутки shift или любой другой программной прокрутке. С другой стороны, это также предотвращает программную прокрутку с помощью javascript.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#clip
Решение, которое правильно работает для мобильного устройства с гибким позиционированием:
html,body {
width: 100%;
margin: 0;
padding: 0;
}
и на веб-странице:
<meta name="viewport" content="width=device-width, user-scalable=0">
Не забудьте разместить этот css в разных основных разделах веб-страницы:
height : auto !important;
html, body{ overflow-x: hidden; position: relative; }Просто попробуйте так, где вы добавили скрытое переполнение.
Единственный способ исправить эту проблему для моей модальности начальной загрузки (содержащей форму) - добавить следующий код в мой CSS:
.modal {
-webkit-overflow-scrolling: auto!important;
}
Шаг 1: установите фиксированное положение для элемента, выходящего из области просмотра. В моем случае это:
.nav-links {
position:fixed;
right:0px;
background-color:rgba(0,0,0, 0.8);
height:85vh;
top:8vh;
display:flex;
flex-direction:column;
align-items: center;
width:40%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
Шаг 2: добавьте свойство css в body и html как:
body, html{
overflow-x: hidden;
}
Я не добавлял обертку. У меня сработали только эти два шага. Проект, над которым я работаю, представляет собой угловой проект.
Следующие работы
body,
.innerbodywrapper{
overflow-x: hidden;
position: fixed;
width: 100%;
height: 100vh;
}