overflow:hidden, примененный к <body>, работает в iPhone Safari? Вроде нет. Я не могу создать оболочку для всего сайта, чтобы добиться этого ...
Вы знаете решение?
Пример: у меня длинная страница, и я просто хочу скрыть содержимое, которое находится под «сгибом», и это должно работать на iPhone / iPad.
После многих дней попыток я нашел это решение, которое сработало для меня:
touch-action: none;
-ms-touch-action: none;
У меня была аналогичная проблема, и я обнаружил, что применение overflow: hidden; к html и body решило мою проблему.
html,
body {
overflow: hidden;
}
Для iOS 9 вам может потребоваться использовать это вместо: (Спасибо, chaenu!)
html,
body {
overflow: hidden;
position: relative;
height: 100%;
}
position: relative.
- person Edo; 19.04.2017
position: fixed в течение некоторого времени, но недостатком является то, что это сбрасывает позицию прокрутки.
- person Edo; 26.06.2017
height: 100% на html и body исправил это для меня на iOS 11.4.
- person kmgdev; 07.06.2018
position: relative.
- person Arnav Borborah; 18.09.2019
Некоторые решения, перечисленные здесь, имели странные глюки при растяжении эластичной прокрутки. Чтобы исправить это, я использовал:
body.lock-position {
height: 100%;
overflow: hidden;
width: 100%;
position: fixed;
}
Источник: http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/
position: relative), однако позиция прокрутки теряется после восстановления стиля по умолчанию (например, закрытия меню).
- person jmarceli; 16.03.2017
// 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
Была эта проблема сегодня на iOS 8 и 9, и кажется, что теперь нам нужно добавить высоту: 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'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 этот класс для вырезания страницы
когда вы отключите этот класс, первая строка вызовет полосу прокрутки назад
Да, это связано с новыми обновлениями в сафари, которые теперь нарушают ваш макет, если вы используете overflow: hidden, чтобы позаботиться об очистке 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.
Небольшое изменение: вам может быть лучше использовать overflow: scroll, чтобы прокрутка двумя пальцами работала.
Почему бы не обернуть контент, который вы не хотите показывать, в элемент с классом и установить для этого класса значение 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);
}
Значение ключевого слова CSS, которое сбрасывает значение свойства до значения по умолчанию, указанного браузером в его таблице стилей UA, как если бы веб-страница не содержала CSS. Например, display:revert на <div> приведет к display:block.
overflow: revert;
Думаю, это сработает
Просто измените высоту тела на <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%;
}
