Имеет ли overflow:hidden
применяться к<body>
работы на iPhone Safari? Вроде нет. Я не могу создать оболочку для всего сайта, чтобы добиться этого ...
Вы знаете решение?
Пример: у меня длинная страница, и я просто хочу скрыть содержимое, которое находится под «сгибом», и это должно работать на iPhone / iPad.
Ответы:
У меня была аналогичная проблема, и я обнаружил, что применился
overflow: hidden;
к обоимhtml
иbody
решил мою проблему.Для iOS 9 вам может потребоваться использовать это вместо: (Спасибо, chaenu!)
источник
position: relative
.источник
Некоторые решения, перечисленные здесь, имели странные сбои при растяжении эластичной прокрутки. Чтобы исправить это, я использовал:
Источник: http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/
источник
position: relative
), однако позиция прокрутки теряется после восстановления стиля по умолчанию (например, закрытия меню).// 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' ) );
Была эта проблема сегодня на iOS 8 и 9, и кажется, что теперь нам нужно добавить высоту: 100%;
Так что добавьте
источник
Объединяя ответы и комментарии здесь и этот аналогичный вопрос здесь сработало для меня.
Итак, отправка в целом ответа.
Вот как вам нужно поместить div-обертку вокруг содержимого вашего сайта прямо внутри
<body>
тега.Создайте класс-оболочку, как показано ниже.
Я также получил идею из этого ответа здесь .
И этот ответ здесь тоже заставляет задуматься. Что-то, что, вероятно, будет одинаково хорошо работать как на настольных компьютерах, так и на устройствах.
источник
Он работает в браузере Safari.
источник
Для меня это:
Недостаточно, я не работал на iOS в Safari. Еще пришлось добавить:
Чтобы он работал хорошо. Теперь работает нормально :)
источник
Я работал с
<body>
и<div class="wrapper">
Когда откроется всплывающее окно ...
<body>
получает высоту 100% и переполнение: скрыто<div class="wrapper">
получает положение: относительное; переполнение: скрытое; высота: 100%;Я использую JS / jQuery, чтобы получить фактическую позицию прокрутки страницы и сохранить значение как атрибут данных для тела
Затем я прокручиваю до позиции прокрутки в .wrapper DIV (не в окне)
Вот мое решение:
JS / JQuery:
CSS:
Он хорошо работает с обеих сторон ... настольный и мобильный (iOS).
Советы и улучшения приветствуются :)
Ура!
источник
добавьте это по умолчанию в свой css
toggleClass этот класс для вырезания страницы
когда вы выключите этот класс, первая строка вызовет полосу прокрутки назад
источник
Да, это связано с новыми обновлениями в сафари, которые теперь нарушают ваш макет, если вы используете overflow: hidden, чтобы позаботиться об очистке div.
источник
Это применимо, но применимо только к определенным элементам в DOM. например, он не будет работать с таблицей, td или некоторыми другими элементами, но он будет работать с тегом <DIV>.
например:
Проверено только в iOS 4.3.
Небольшое изменение: вам может быть лучше использовать overflow: scroll, чтобы прокрутка двумя пальцами работала.
источник
Почему бы не обернуть контент, который вы не хотите показывать, в элемент с классом и установить этот класс
display:none
в таблицу стилей, предназначенную только для iphone и других портативных устройств?источник
Вот что я сделал: я проверяю положение тела по оси Y, затем фиксирую тело и настраиваю верх на отрицательное значение этого положения. В обратном направлении я делаю тело статичным и устанавливаю прокрутку на значение, которое я записал ранее.
источник
Просто измените высоту тела <300 пикселей (высота мобильного окна просмотра в наземном пространстве составляет от 300 до 500 пикселей)
JS
CSS
источник