У меня есть веб-сайт здесь.
В браузере рабочего стола черная панель меню правильно распространяется только на край окна, так как body имеет overflow-x:hidden.
В любом мобильном браузере, будь то Android или iOS, черная панель меню отображает полную ширину, которая дает пробелы справа от страницы. Насколько я могу судить, это пробелы даже не является частью тегов html или body.
Даже если я установил для окна просмотра определенную ширину в <head>:
<meta name="viewport" content="width=1100, initial-scale=1">
Сайт расширяется до 1100px, но все еще имеет пробелы за пределами 1100.
Что мне не хватает? Как сохранить окно просмотра до 1100 и отключить переполнение?
Создание div обертки сайта внутри <body> и применение overflow-x:hidden к обертке вместо <body> или <html> решило проблему.
Похоже, что браузеры, которые анализируют тег <meta name="viewport">, просто игнорируют атрибуты overflow в тегах html и body.
Примечание: Вам также может понадобиться добавить position: relative в div обертки.
попробовать
html, body {
overflow-x:hidden
}
вместо
body {
overflow-x:hidden
}
комментарий 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;
}
Это простейшее решение для решения горизонтальной прокрутки в Safari.
html, body {
position:relative;
overflow-x:hidden;
}
Как указано в @Indigenuity, это, по-видимому, вызвано тем, что браузеры анализируют тег <meta name="viewport">.
Чтобы решить эту проблему в источнике, попробуйте следующее:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.
В моих тестах это не позволяет пользователю увеличивать масштаб изображения, чтобы просмотреть переполненный контент, и в результате это также предотвращает прокрутку и прокрутку.
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;
работает на iOS9
Создание обертки сайта div внутри тела и применение переполнения- > x: скрытый к оболочке 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 в каждый из li, 20px с каждой стороны влево и вправо:
.menuitem {
display: block;
padding: 0px 20px;
}
Когда вы измените размер браузера меньшим, вы найдете еще белый фон: вместо фонового рисунка разместите свою текстуру с вашего div до body. Или, наоборот, отрегулируйте ширину навигационного меню от 100% до более низкого значения с помощью мультимедийных запросов. В вашем коде есть много настроек, чтобы создать правильный макет, я не уверен, что вы намереваетесь сделать, но приведенный выше код каким-то образом исправит ваш переполненный бар.
Добавление обертки <div> вокруг всего вашего контента действительно будет работать. В то время как семантически "icky", я добавил div с классом overflowWrap прямо в тег body, а затем установил мой CSS следующим образом:
html, body, .overflowWrap {
overflow-x: hidden;
}
Может быть, теперь перебор, но работает как шарм!
Я столкнулся с той же проблемой с устройствами Android, но не с устройствами iOS. Управляется удалением, указав позицию: относительный во внешнем div абсолютно позиционированных элементов (с переполнением: скрытый для внешнего div)
Никакое предыдущее одно решение не работало для меня, мне пришлось их смешивать и устранить проблему также на более старых устройствах (iphone 3).
Во-первых, мне пришлось обернуть содержимое html в внешний div:
<html>
<body>
<div id="wrapper">... old html goes here ...</div>
</body>
</html>
Затем мне пришлось применить переполнение, скрытое к оболочке, потому что переполнение-x не работало:
#wrapper {
overflow: hidden;
}
и это устранило проблему.
Также возникает проблема с отображением тела и html: table;. Переключение дисплея на блок исправляет его.
Я решил проблему, используя 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
Как субарахник сказал, что переполнение-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;
}
Я только что работал над этим несколько часов, пытаясь использовать различные комбинации вещей на этой и других страницах. Дело в том, что для меня в конце концов было сделать обертку сайта div, как это было предложено в принятом ответе, но установить оба переполнения в скрытые, а не только переполнение x. Если я оставлю переполнения в прокрутке, я получаю страницу, которая только прокручивается вертикально на несколько пикселей, а затем останавливается.
#all-wrapper {
overflow: hidden;
}
Просто этого было достаточно, не устанавливая ничего на тело или элементы html.
Единственный способ исправить эту проблему для моего модального мода (содержащего форму) - добавить следующий код в мой CSS:
.modal {
-webkit-overflow-scrolling: auto!important;
}
Вы можете просто предотвратить прокрутку на теле, используя 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;
}
}