it-swarm.com.ru

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

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

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

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

101
Francesco

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

html,
body {
    overflow: hidden;
} 

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

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}
90
Alex Haas
body {
  position:relative; // that's it
  overflow:hidden;
}
63
laFunk

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

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

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

19
Davey

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

Так добавь

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

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

Так что постинг в целом ответ.

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

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

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

4
Devraj Gadhavi

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

html,
body {
  overflow: hidden;
  position: fixed
}
2
Sridhar

Для меня это:

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

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

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

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

1
Loosie94

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

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->
1
S16

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

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

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

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

Я использую JS/jQuery, чтобы получить фактическую позицию прокрутки страницы и сохранить значение как data-attribut to 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
Tobias Gerlach

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

0
Lee McAlilly
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 этот класс, чтобы вырезать страницу

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

0
Longwinter

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

Просто измените рост <300px (высота мобильного видового экрана на суше составляет от 300 до 500px)

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%;
}
0
kristian lepi