Работает ли overflow: hidden применительно к <body> в iPhone Safari?

131

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

Вы знаете решение?

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

— Francesco
источник

1

Я отчаянно искал ответ на этот вопрос.

— mwilcox

115

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

html,
body {
    overflow: hidden;
}

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

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

— Алекс Хаас
источник

12

Это не работает в iOS Safari. position: relative также необходимо.

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

5

Да, добавить в html + body как относительный, так и переполненный

— wutang 05

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

THANK. ТЫ. У меня была большая проблема, когда элементы переходили из-за пределов области просмотра внутрь. Произошла странная ошибка, при которой контент был расширен. Это было решение для меня!

— Эрик

48

В моем случае добавление «position: relative» не помогло, но добавление «position: fixed» сработало.

— LeastOne

1

Угу, это сработало. Я создаю сайт, на котором они хотят, чтобы мобильная навигация просматривала контент, но когда он открывается, контент за навигацией в фоновом режиме все равно прокручивается. Другие ответы с положением, переполнением и высотой также работали, но с высотой страница перескакивает вверх, когда я открываю навигацию. Я предполагаю, что это уникально для моей ситуации, но просто подумал, что упомяну об этом, если у кого-то еще с наложенной навигацией будет такая же проблема.

— 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/

— Davey
источник

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;
}

— chaenu
источник

4

Объединяя ответы и комментарии здесь и этот аналогичный вопрос здесь сработало для меня.

Итак, отправка в целом ответа.

Вот как вам нужно поместить 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;
}

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

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

— Деврадж Гадхави
источник

Это было для меня решением.

— Роэль Магдалено

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).

Советы и улучшения приветствуются :)

Ура!

— Toge
источник

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

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

— Longwinter
источник

0

Да, это связано с новыми обновлениями в сафари, которые теперь нарушают ваш макет, если вы используете overflow: hidden, чтобы позаботиться об очистке div.

— Ли МакАлилли
источник

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.

Небольшое изменение: вам может быть лучше использовать overflow: scroll, чтобы прокрутка двумя пальцами работала.

— Адам
источник

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