Чи працює переповнення: прихований додаток до <body> працює на iPhone Safari?

131

Чи overflow:hiddenзастосовується для <body>роботи на iPhone Safari? Здається, ні. Я не можу створити обгортку на всьому веб-сайті, щоб досягти цього ...

Ви знаєте рішення?

Приклад: у мене довга сторінка, і я просто хочу приховати вміст, який знаходиться під «складкою», і він повинен працювати на iPhone / iPad.

— Франческо
джерело

1

Відчайдушно шукаючи, щоб знайти собі відповідь на це.

— mwilcox

115

У мене було подібне питання, і я виявив, що звернення overflow: hidden;до обох htmlі bodyвирішило мою проблему.

html,
body {
    overflow: hidden;
}

Для iOS 9, можливо, вам доведеться використовувати це замість цього: (Дякую подяку!)

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}

— Алекс Хаас
джерело

12

Це не працює на iOS Safari. позиція: відносна також необхідна.

— Кевін Бордерс

5

Так, додайте відносні та переповнені в html + body

— wutang

3

це не працює на iOS 9, навіть використовуючи відношення положення на тілі та html

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

1

Слово попередження, переповнення, приховане на тег <html>, порушить подію прокрутки jQuery

— Бретт Грегсон

2

Це не працює для мене на iOS 9, Safari. Тіло все ще прокручується, також після додавання position: relative.

— Едо

87

body {
  position:relative; // that's it
  overflow:hidden;
}

— laFunk
джерело

3

СПАСИБІ. ТИ. У мене виникла велика проблема, коли елементи переходили із зовнішнього огляду, всередину. Буде дивна помилка, де вміст поширюється. Це було рішення для мене!

— Ерік

48

У моєму випадку додавання "позиція: відносна" не допомогло, але додалося "позиція: виправлено".

— LeastOne

1

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

— moonunit7

Куди йде обгортка? Як це повна відповідь?

— Кугель

8

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

— Майк

27

Деякі перераховані тут рішення мали деякі дивні збої при розтягуванні пружної прокрутки. Щоб виправити те, що я використав:

body.lock-position {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

Джерело: http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/

— Дейві
джерело

4

Це приємно (у моєму випадку працює краще, ніж position: relative), однак позиція прокрутки втрачається після відновлення стилю за замовчуванням (наприклад, закриття меню).

— jmarceli

1

Для позиції прокрутки ви можете використовувати js (jquery у цьому прикладі) зробити щось подібне:

// on menu open   // save window pos   $('body').attr( 'data-pos', $(window).scrollTop() ) ;   // ...   // on menu close   // scroll to saved window pos   $( window ).scrollTop( $('body').attr( 'data-pos' ) );

— Дейві

Це дійсно зробив галочку для мене!

— D.Steinel

8

Була ця проблема сьогодні на iOS 8 та 9, і здається, що зараз нам потрібно додати висоту: 100%;

Тож додайте

html,
body {
  position: relative;
  height: 100%;
  overflow: hidden;
}

— чаена
джерело

4

Поєднання відповідей та коментарів тут і це подібне запитання тут працювало для мене.

Тож повідомлення в цілому відповідь.

Ось як потрібно розмістити обгортковий розділ навколо вмісту вашого веб-сайту, безпосередньо всередині <body>тегу.

 <!DOCTYPE HTML>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <!-- other meta and head stuff here -->
 <head>
 <body>
     <div class="wrapper">
         <!-- Your site content here -->
     </div>
 </body>
 </html>

Створіть клас обгортки, як показано нижче.

.wrapper{
    position:relative; //that's it
    overflow:hidden;
}

Я також отримав ідею з цієї відповіді тут .

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

— Деврадж Гадхаві
джерело

Це було рішенням для мене.

— Roel Magdaleno

1

Це змушує сторінку прокручуватися до мене, коли модальний закривається.

— Джейсон

4

Його працює в браузері Safari.

html,
body {
  overflow: hidden;
  position: fixed
}

— Шрідхар
джерело

4

Для мене це:

height: 100%; 
overflow: hidden; 
width: 100%; 
position: fixed;

Не вистачило, я не працював на iOS на Safari. Я також повинен був додати:

top: 0;
left: 0;
right: 0;
bottom: 0;

Щоб це добре працювало. Зараз добре працює :)

— Loosie94
джерело

2

Я працював з <body>і<div class="wrapper">

Коли відкриється спливаюче вікно ...

<body> отримує висоту 100% і перелив: приховано

<div class="wrapper"> отримує положення: відносне; перелив: прихований; висота: 100%;

Я використовую JS / jQuery, щоб отримати фактичну прокрутку сторінки та зберігати значення як присвоєння даних тілу

Потім я прокручую до прокрутки в .wrapper DIV (не у вікні)

Ось моє рішення:

JS / jQuery:

// when popup opens

$('body').attr( 'data-pos', $(window).scrollTop()); // get actual scrollpos
$('body').addClass('locked'); // add class to body
$('.wrapper').scrollTop( $('body').attr( 'data-pos' ) ); // let wrapper scroll to scrollpos

// when popup close

$("body").removeClass('locked');
$( window ).scrollTop( $('body').attr( 'data-pos' ));

CSS:

body.locked {position:relative;overflow:hidden;height:100%;}
body.locked .wrapper {position:relative;overflow:hidden;height:100%;}

Він добре працює з обох сторін ... настільний і мобільний (iOS).

Поради та вдосконалення вітаються :)

Ура!

— Тоге
джерело

1

html {
  position:relative;
  top:0px;
  left:0px;
  overflow:auto;
  height:auto
}

додайте це як за замовчуванням у свій css

.class-on-html{
  position:fixed;
  top:0px;
  left:0px;
  overflow:hidden;
  height:100%;
}

toggleClass цей клас для вирізання сторінки

коли ви вимкнете цей клас, перший рядок зателефонує смузі прокрутки назад

— Довговічна
джерело

0

Так, це пов’язано з новими оновленнями сафарі, які зараз порушують ваш макет, якщо ви використовуєте переповнення: приховано, щоб подбати про очищення дівок.

— Лі МакАліллі
джерело

10

Чи можете ви детальніше розібратися з цим чи навести джерело? Ця відповідь може бути правильною, але це не дуже корисно.

— pjmorse

0

Це застосовується, але стосується лише певних елементів у DOM. Наприклад, він не працюватиме на таблиці, td або деяких інших елементах, але буде працювати над тегом <DIV>.
наприклад:

<body>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Тестується лише в iOS 4.3.

Невелика редакція: можливо, вам буде краще використовувати переповнення: прокрутіть так, щоб дві прокрутки пальця спрацювали.

— адам
джерело

0

Чому б не обернути вміст, який не хочеться відображати в елементі, класом і не встановити цей клас display:noneу таблицю стилів, призначену лише для iphone та інших портативних пристроїв?

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->

— S16
джерело

0

Ось що я зробив: я перевіряю положення тіла y, потім фіксую тіло і налаштовую верхню частину на негативну позицію. На звороті я роблю тіло статичним і встановлюю прокрутку на значення, яке я записав раніше.

var body_x_position = 0;

function disable_bk_scrl(){

    var elb = document.querySelector('body');

    body_x_position = elb.scrollTop;
    // get scroll position in px

    var body_x_position_m = body_x_position*(-1);
    console.log(body_x_position);

    document.body.style.position = "fixed";

    $('body').css({ top: body_x_position_m });

}

function enable_bk_scrl(){  

    document.body.style.position = "static";

    document.body.scrollTo(0, body_x_position);

    console.log(body_x_position);
}

— Аріе С.
джерело

-3

Просто змініть висоту тіла <300 пікс (висота вікна мобільного огляду в ландшафтному просторі приблизно від 300 до 500 пікс.)

JS

$( '.offcanvas-toggle' ).on( 'click', function() {
    $( 'body' ).toggleClass( 'offcanvas-expanded' );
});

CSS

.offcanvas-expended { /* this is class added to body on click */
    height: 200px;
}
.offcanvas {
    height: 100%;
}

— Крістіан Лепі
джерело

Не дуже елегантне рішення, і викличе проблеми на пристроях iOS, розмір яких більший за певні пікселі, які ви в кінцевому підсумку вибираєте. Слід використовувати інший розчин.

— Badrush