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

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

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

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

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

html,
body {
    overflow: hidden;
} 

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

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

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

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

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

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

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

Тож додайте

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

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

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

Ось як потрібно розмістити обгортковий розділ навколо вмісту вашого веб-сайту, безпосередньо всередині <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;
}

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

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

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

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

Для мене це:

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

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

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

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

Я працював з <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).

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

Ура!

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 цей клас для вирізання сторінки

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

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

Це застосовується, але стосується лише певних елементів у 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.

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

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

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

Ось що я зробив: я перевіряю положення тіла 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);
}

Просто змініть висоту тіла <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%;
}