Работает ли overflow: hidden, примененный к ‹body›, на iPhone Safari?

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

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

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


person Francesco    schedule 15.06.2010    source источник
comment
Я отчаянно искал ответ на этот вопрос.   -  person mwilcox    schedule 22.06.2010


Ответы (16)


После многих дней попыток я нашел это решение, которое сработало для меня:

touch-action: none;
-ms-touch-action: none;
person Eduardo Leite    schedule 31.08.2020
comment
Большое спасибо за это, я сходил с ума от создаваемого мной модального компонента, который блокирует прокрутку во всех браузерах, кроме сафари. - person pakman198; 10.03.2021
comment
Вы молодец, сэр! Спасибо! - person savram; 15.06.2021

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

html,
body {
    overflow: hidden;
} 

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

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}
person Alex Haas    schedule 03.08.2013
comment
Это не работает в iOS Safari. position: relative также необходимо. - person Kevin Borders; 29.03.2014
comment
Да добавить как относительное, так и переполнение в html + body - person wutang; 05.07.2014
comment
это не работает на iOS 9, даже с использованием позиции относительно тела и html - person CJT3; 13.12.2015
comment
@CharlesJohnThompsonIII - поддается проверке и есть ли обходной путь? - person tremor; 30.12.2015
comment
Я мог бы решить свою проблему сегодня на iOS 9, добавив высоту: 100%; - ›stackoverflow.com/a/34659821/1384441 - person chaenu; 07.01.2016
comment
Я обновил свой ответ выше для iOS 9. Спасибо, ребята. - person Alex Haas; 08.01.2016
comment
Предупреждение: переполнение, скрытое в теге ‹html›, нарушит событие прокрутки jQuery. - person Brett Gregson; 13.04.2016
comment
2016: высота: 100% делает вертикальную прокрутку не плавной; лучше удалить. - person suz; 13.07.2016
comment
У меня это не работает на iOS 9, Safari. Тело все еще можно прокручивать, даже после добавления position: relative. - person Edo; 19.04.2017
comment
@Edo Наконец-то я получил это, выполнив position: fixed + overflow hidden на теле вместо относительного. Надеюсь это поможет. - person Matt; 18.06.2017
comment
@Matt IIRC мы также запускали position: fixed в течение некоторого времени, но недостатком является то, что это сбрасывает позицию прокрутки. - person Edo; 26.06.2017
comment
height: 100% на html и body исправил это для меня на iOS 11.4. - person kmgdev; 07.06.2018
comment
Есть ли обновления к этому ответу? Ответ у меня не работает даже с position: relative. - person Arnav Borborah; 18.09.2019
comment
@AlexHaas Ни позиция: относительная, ни высота: 100% не работают в IOS .. Я хотел остановить прокрутку тела при перетаскивании элемента на мобильном устройстве. overflow: hidden отлично работает на телефонах Android. Есть ли способ решить эту проблему? - person monisha; 24.03.2020

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

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

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

person Davey    schedule 25.01.2017
comment
Это хорошо (в моем случае работает лучше, чем position: relative), однако позиция прокрутки теряется после восстановления стиля по умолчанию (например, закрытия меню). - person jmarceli; 16.03.2017
comment
Для позиции прокрутки вы можете использовать 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' ) ); - person Davey; 17.05.2017
comment
Это действительно стало для меня галочкой! - person D.Steinel; 13.10.2017

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

Так что добавь

html,
body {
  position: relative;
  height: 100%;
  overflow: hidden;
}
person chaenu    schedule 07.01.2016

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

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

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

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

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

person Devraj Gadhavi    schedule 11.06.2015
comment
Это было для меня решением. - person Roel Magdaleno; 13.01.2016
comment
Это заставляет страницу прокручиваться вверх для меня, когда модальное окно закрывается. - person Jason; 21.09.2018

Он работает в браузере Safari.

html,
body {
  overflow: hidden;
  position: fixed
}
person Sridhar    schedule 15.11.2017

Для меня это:

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

Недостаточно, я не работал на iOS в Safari. Еще пришлось добавить:

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

Чтобы он работал хорошо. Теперь работает нормально :)

person Loosie94    schedule 18.12.2017

Я работал с <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).

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

Ваше здоровье!

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

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

person Longwinter    schedule 27.07.2017

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

person Lee McAlilly    schedule 03.05.2011
comment
Можете ли вы подробнее рассказать об этом или процитировать источник? Этот ответ может быть правильным, но он не очень полезен. - person pjmorse; 16.10.2014

Это применимо, но применимо только к определенным элементам в 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, чтобы прокрутка двумя пальцами работала.

person adam    schedule 20.08.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]-->
person S16    schedule 16.01.2011

Вот что я сделал: я проверяю положение тела по оси 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);
}
person Arie S.    schedule 30.05.2019

Значение ключевого слова CSS, которое сбрасывает значение свойства до значения по умолчанию, указанного браузером в его таблице стилей UA, как если бы веб-страница не содержала CSS. Например, display:revert на <div> приведет к display:block.

overflow: revert;

Думаю, это сработает

person Vahe Nikoghosyan    schedule 24.09.2020

Просто измените высоту тела на <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%;
}
person kristian lepi    schedule 19.01.2018
comment
Не очень элегантное решение, которое вызовет проблемы на устройствах iOS, размер которых превышает размер пикселей, которые вы в конечном итоге выберете. Следует использовать другое решение. - person Badrush; 11.07.2018

person    schedule
comment
БЛАГОДАРИТЬ. ТЫ. У меня была большая проблема, когда элементы переходили из-за пределов области просмотра внутрь. Произошла странная ошибка, при которой контент был расширен. Это было для меня решением! - person Eric; 27.07.2014
comment
В моем случае добавление position: relative не помогло, но добавление position: fixed работало. - person LeastOne; 11.03.2015
comment
Ура, это сработало. Я создаю сайт, на котором они хотят, чтобы мобильная навигация просматривала контент, но когда он открывается, контент за навигацией в фоновом режиме все равно прокручивается. Другие ответы с положением, переполнением и высотой также работали, но с высотой страница перескакивает вверх, когда я открываю навигацию. Я предполагаю, что это уникально для моей ситуации, но просто подумал, что упомяну об этом, если у кого-то еще с наложенной навигацией будет такая же проблема. - person moonunit7; 24.09.2016
comment
Куда девается обертка? Как это полный ответ? - person Kugel; 22.12.2017
comment
Позиция: фиксированная; работа меня меня, а не Должность: родственник; - person Pons Purushothaman; 02.04.2019
comment
Добавление фиксированной позиции действительно решает проблему, но заставляет страницу прыгать вверх, что плохо для UX, если вы реализуете это в фоновом режиме, пока вы представляете меню или модальное окно. Чтобы создать хороший UX, вы должны перед блокировкой позиции сохранить позицию прокрутки страницы, а затем повторно применить ее после разблокировки. - person mike; 24.04.2019
comment
В моем случае мне пришлось добавить ширину: 100%, чтобы он работал - person Iruku Kagika; 26.11.2019