Работает ли overflow:hidden на <body> на iPhone Safari? Кажется, нет.
Я не могу создать обертку на всем сайте, чтобы достичь этого...
Знаете ли вы решение?
Пример: у меня длинная страница, и я просто хочу скрыть содержимое, которое находится под "сгибом", и оно должно работать на iPhone/iPad.
У меня была аналогичная проблема, и я обнаружил, что применение overflow: hidden; для обоих html и body решило мою проблему.
html,
body {
overflow: hidden;
}
Для iOS 9 вам может понадобиться использовать это вместо: (Спасибо chaenu!)
html,
body {
overflow: hidden;
position: relative;
height: 100%;
}
body {
position:relative; // that 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, и кажется, что нам теперь нужно добавить height: 100%;
Итак, добавьте
html,
body {
position: relative;
height: 100%;
overflow: hidden;
}
Объединив ответы и комментарии здесь, и этот похожий вопрос здесь работал у меня.
Итак, отправляйте в целом ответ.
Вот как вам нужно поместить обертку 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 it
overflow:hidden;
}
Я также получил эту идею от здесь.
И этот ответ здесь также получил некоторую пищу для размышлений. Что-то, что, вероятно, будет одинаково хорошо работать как на рабочих столах, так и на устройствах.
Работает в браузере Safari.
html,
body {
overflow: hidden;
position: fixed
}
Почему бы не обернуть содержимое, которое вы не хотите показывать в элементе с классом, и установить этот класс в display:none в таблице стилей, предназначенной только для iphone и других карманных устройств?
<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->
Я работал с <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).
Подсказки и улучшения приветствуются:)
Ура!
Для меня это:
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
Этого было недостаточно, я не работал на iOS в Safari. Я также должен был добавить:
top: 0;
left: 0;
right: 0;
bottom: 0;
Чтобы это работало хорошо. Теперь работает нормально :)
Да, это связано с новыми обновлениями в сафари, которые разбивают ваш макет сейчас, если вы используете переполнение: скрытый, чтобы позаботиться об очистке div.
Это применимо, но применимо только к некоторым элементам в 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.
Небольшое редактирование: вам может быть лучше использовать переполнение: прокрутите, чтобы выполнить прокрутку пальца.
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 этот класс для вырезания страницы
когда вы отключите этот класс, первая строка вызовет строку прокрутки назад
Просто измените высоту тела <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%;
}