Overflow-x: прихований не запобігає переповненню вмісту в мобільних браузерах

142

У мене тут веб-сайт .

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

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

Навіть якщо я встановити вікно перегляду на конкретну ширину в <head>:

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

Сайт розширюється до 1100px, але все ще має пробіли за межами 1100.

Що я пропускаю? Як зберегти вікно перегляду до 1100 та відрізати перелив?

— Індивідуальність
джерело

1

Особливо це питання в iOS9

— Чак Ле

270

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

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

Примітка. Можливо, вам також потрібно буде додати position: relativeв оболонку div.

— Індивідуальність
джерело

44

Я виявив , що на додаток до встановивши overflowдля hidden, я повинен був встановити , positionщоб fixed...

— Victor S

16

Додавання положення до фіксованого перешкоджає мені прокручувати!

— теоретиза

5

Я спробував, я помістив увесь свій код у div і даю йому overflow-x: приховано, але не працює, я додаю <meta name = "viewport" content = "width = device-width, Initial-scale = 1"> теж нічого, але нічого не змінилося: / будь-які ідеї?

4

@leepowers overflow-x: hiddenвсе ще не працює для мене навіть після того, як я додаю цей метатег. Чи можете ви поділитися посиланням на ваш веб-сайт, де він працює?

— юпітер

3

Ей, банда, коли я виявив, що це також position:relativeпрацює.

— Томас Валадес

80

спробуйте

html, body {
  overflow-x:hidden 
}

замість просто

body {
  overflow-x:hidden 
}

— субарахнід
джерело

7

Дякую, але застосування overflowнічого до htmlта / або bodyв будь-якій комбінації не вирішило проблему.

— Відступництво

Вибачте, що це не вийшло. Перш ніж я відповів, я зробив швидкий тест за допомогою вашого сайту та застосувавши свою пропозицію до вашого css. Це вирішило проблему для стандартного та дельфінового браузера на моєму телефоні Android.

— субарахнід

3

Працювали для мене. eduardd.eu/projects/ezo (між 480 та 992 пікселями в нижній частині кадру виникла проблема із переповненим зображенням жінки та рушниками)

— Eduard

2

Хтось знає, чому це працює, якщо окремо не вказати body {} та html {}?

— hamncheez

1

Для цього потрібно також додати height:100%;, інакше вертикальна прокрутка не працюватиме належним чином на сторінках із завантаженням зображень (завдяки чому сторінка зростає у висоту).

— Арно ван Оордт

69

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

— Бред
джерело

2

Чи є в будь-якому випадку, щоб змусити мобільну частину не підстрибувати на вершину?

— WraithKenny

1

Що для мене спрацювало, це перетворити елемент, який повинен був бути прихований переповненням з положення: абсолютним до положення: фіксованим. Вдячно

— Чак Ле Бут

1

@WraithKenny - Якщо ви хочете, щоб сторінка перешкоджала стрибкам до верху на мобільному пристрої, ви можете скористатись таким підходом / некрасивим підходом. Всередині своєї модальної функції переконайтеся, що ви отримаєте поточне зміщення прокрутки, перш ніж робити що-небудь, ніж застосуйте модальний стиль разом, а також встановіть верхній запас вашого тіла рівний мінусу поточного зміщення. Переконайтесь, що ви вилучили модальний режим, встановіть поле назад на 0 та прокрутіть сторінку назад до початкового зміщення.

— Еміль Борконі

2

Це рішення працює лише в тому випадку, якщо вміст вашого модаля вміститься на екран, тобто вам не потрібно прокручувати сам модал.

— Тобіас

На моїй сторінці є й інші фіксовані та абсолютні позиціоновані елементи. Змушуючи тіло також position:fixed or absoluteпорушувати свої позиції. Не підходить / працює в моєму випадку :(

— sohaiby

31

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

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

— Вальтур Буерк
джерело

1

Здається, працює. Але чи є у вас пояснення, чому це працює?

— Ларс

Ні, нарешті не вийшло. Я закінчив робити математику і переконався, що div не ширше дозволеного, css calc () мені тут дуже допомогло, оскільки це дозволяє суміш відносних ширин (vw або%) та абсолютних ширин (px).

— LarS

Звичайно, це щось важке. Ще десь щось переповнюється, зараз це просто відрізано. Спробуйте додати правило css: * {контур: 1px суцільний червоний; } Якщо ви все ще не можете знайти переповнюваного елемента, він, ймовірно, десь викликаний запасом. Спробуйте додати * {margin: 0! ВАЖЛИВО; } і побачити, чи зникне перелив.

— Вальтур Буерк

Працює для мене. Цікаво, що прихований елемент змінює ширину тіла. Для мене, однак, це стосується ВСІХ браузерів Safari, не лише мобільних. Просто довелося виправити Bootstrap 4 table-responsiveBug. Це було рішення.

— Хитрий Фаталіст

2

Я не можу повірити, що це все ще проблема у 2019 році. Але рішення вище повністю працювало. Дякую.

— staxim

28

Як стверджує @Indigenuity, це, мабуть, викликано браузерами, які аналізують <meta name="viewport">тег.

Щоб вирішити цю проблему в джерелі, спробуйте наступне:

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

У моїх тестах це не дозволяє користувачеві зменшити масштаб, щоб переглянути переповнений вміст, і, як результат, також запобігає панорамуванню / прокрученню до нього.

— Темпуртуртул
джерело

Додавання initial-scale=1до існуючого метатега вікна перегляду дійсно вирішує проблему. Дякую!

— Джеймс Уілсон

6

Для мене це було minimum-scale=1виправлене

— jpenna

Це те, що насправді працювало для мене після спробу всього іншого. Дуже дякую !

— Суворий Лімей

16

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

працює на iOS9

— ollio
джерело

3

Це спрацьовує, але якщо поставити положення: прикріплене до вашого тіла робить вас прокручуванням до верху

— ThaoD5

1

Дивно, але це працювало і для мене без фіксованого положення. Тільки одне з усіх рішень тут!

— Гаравани

Лише той, хто працював на мене, використовуючи хром і бустер + кутовий JS

— kiwicomb123

6

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

— Енн
джерело

якщо ви використовуєте, box-sizing: border-box;ви можете додати набивання до поділки на 100%.

— Чарльз Джон Томпсон III

6

Створення розбивки веб-сайту всередині тіла та застосування переповнення-> x: приховане до обгортки ВСТАНОВЛЕННЯ тіла або html виправлено проблему.

Це працювало для мене після додавання position: relativeв обгортку.

— Ісаак Ф
джерело

Це працювало для мене. Побічним ефектом було те, що у мене дві смуги прокрутки замість однієї. Рішення полягало в тому, щоб зробити це overflow: hiddenзамість overflow-x: hidden. Працює на мобільних Safari, Chrome, IE11 на OSX та Win.

— поп

4

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

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

Можливо, зараз буде зайвим, але працює як шарм!

— MBurnette
джерело

4

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

— Квок Пан Фунг
джерело

4

Жодне попереднє єдине рішення не працювало для мене, мені довелося їх змішувати, і проблема виправлена також на старих пристроях (iphone 3).

По-перше, мені довелося загортати вміст html у зовнішній div:

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

Тоді мені довелося застосувати переповнення, приховане до обгортки, тому що overflow-x не працює:

  #wrapper {
    overflow: hidden;
  }

і це вирішило питання.

— спагетікод
джерело

Чим це відрізняється від відповіді @ Indigenuity?

— Ян Кемп

3

@ian Kemp overflow: hidden! = overflow-x: hidden

— spaghetticode

3

Я вирішив проблему, використовуючи 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
джерело

3

Як субарахнід сказав, що переповнення-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
джерело

1

Я просто працюю над цим кілька годин, пробуючи різні комбінації речей з цієї та інших сторінок. Зрештою, для мене спрацювало те, щоб зробити div оболонку сайту, як було запропоновано у прийнятій відповіді, але встановити обидва переливання на приховані замість просто переповнення x. Якщо я залишу переливок-у при прокручуванні, я закінчую сторінку, яка прокручується лише вертикально на кілька пікселів, а потім зупиняється.

#all-wrapper {
  overflow: hidden;
}

Просто цього було достатньо, не встановлюючи нічого на корпусі чи html-елементах.

— високий товариш
джерело

1

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

використання також position: fixedдля обгортки / div всередині тіла теж добре, але коли у мене є меню та використовую Javascript, натисніть анімований прокрутку до деякого розділу, це не працює.

Отже, я вирішив використовувати touch-action: pan-y pinch-zoomна обгортці / діві всередині тіла. Проблема вирішена.

— Джираю Л
джерело

0

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

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

— Тобіас
джерело