Работает ли переполнение: скрытый для <body>на iPhone Safari? - PullRequest
Новая
       46

Работает ли переполнение: скрытый для <body>на iPhone Safari?

113 голосов
/ 15 июня 2010

Работает ли overflow:hidden с <body> на iPhone Safari?Кажется нет.Я не могу создать оболочку для всего сайта, чтобы добиться этого ...

Знаете ли вы решение?

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

Ответы [ 14 ]

99 голосов
/ 04 августа 2013

У меня была похожая проблема, и я обнаружил, что применение overflow: hidden; к html и body решило мою проблему. 

html,
body {
    overflow: hidden;
}

Для iOS 9 вам может понадобиться использовать это вместо: (Спасибо, chaenu!) 

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}
75 голосов
/ 30 ноября 2012 
body {
  position:relative; // that's it
  overflow:hidden;
}
23 голосов
/ 25 января 2017

Некоторые решения, перечисленные здесь, имели некоторые странные сбои при растягивании упругой прокрутки. Чтобы исправить это я использовал: 

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

Источник: http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/

7 голосов
/ 07 января 2016

Была эта проблема сегодня на iOS 8 и 9, и теперь нам нужно добавить высоту: 100%;

Итак, добавьте 

html,
body {
  position: relative;
  height: 100%;
  overflow: hidden;
}
4 голосов
/ 11 июня 2015

Комбинируя ответы и комментарии здесь и этот похожий вопрос здесь работал для меня.

Итак, отправка всего ответа.

Вот как вам нужно поставитьdiv обертки вокруг содержимого вашего сайта, внутри тега <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;
}

Я также получил идею из thisответ здесь .

И этот ответ здесь также есть пища для размышлений.Что-то, что, вероятно, будет одинаково хорошо работать как на настольных компьютерах, так и на устройствах.

3 голосов
/ 18 декабря 2017

Для меня это: 

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

Недостаточно, я не работал на iOS в Safari.Я также должен был добавить: 

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

, чтобы это работало хорошо.Работает нормально сейчас:)

3 голосов
/ 15 ноября 2017

Работает в браузере Safari. 

html,
body {
  overflow: hidden;
  position: fixed
}
1 голос
/ 09 ноября 2017

Я работал с <body> и <div class="wrapper">

Когда открывается всплывающее окно ...

<body> получает высоту 100% и переполнение: скрыто

<div class="wrapper"> получает положение: относительное; переполнение: скрытое; высота: 100%;

Я использую JS / jQuery для получения фактической позиции прокрутки страницы и сохраняю значение как атрибут data-атрибута body

Затем я прокручиваю до положения прокрутки в .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 голос
/ 27 июля 2017 
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 этот класс, чтобы вырезать страницу

, когда вы отключите этот класс, первая строка вызовет полосу прокрутки назад

1 голос
/ 16 января 2011

Почему бы не обернуть содержимое, которое вы не хотите отображать, в элемент с классом и установить этот класс равным display:none в таблице стилей, предназначенной только для iphone и других портативных устройств? 

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