Автоматическое переполнение не работает на iphone

Обновлено: 06.12.2022

Применяется ли overflow:hidden для работы в iPhone Safari? (9)

Мне помогло сочетание ответов и комментариев здесь и этого похожего вопроса здесь.

Поэтому публикую ответ целиком.

Вот как вам нужно поместить div-оболочку вокруг контента вашего сайта, прямо внутри тега.

Создайте класс-оболочку, как показано ниже.

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

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

Применяется ли overflow:hidden для работы в iPhone Safari? Кажется, нет. Для этого я не могу создать оболочку для всего веб-сайта.

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

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

Мало, я не работал на iOS с Safari. Мне также пришлось добавить:

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

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

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

Я работал с и

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

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

Я использую JS/jQuery, чтобы получить фактическую позицию прокрутки страницы и сохранить значение как атрибут данных для тела

Затем я прокручиваю до позиции прокрутки в .wrapper DIV (не в окне)

Вот мое решение:

Это хорошо работает с обеих сторон. ПК и мобильные устройства (iOS).

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

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

Просто измените рост

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

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

Краткий обзор ↬ В этой статье мы рассмотрим причины проблем с переполнением и способы их решения. Мы также рассмотрим, как современные функции инструментов разработчика (DevTools) могут упростить процесс исправления и отладки.

Если вы разработчик внешнего интерфейса, вы могли столкнуться с проблемами горизонтальной полосы прокрутки, особенно на мобильных устройствах. Поскольку существует множество причин проблем с полосой прокрутки, прямого решения не существует. Некоторые проблемы можно исправить быстро, а некоторые требуют некоторых навыков отладки.

Что такое проблема переполнения?

Прежде чем обсуждать проблемы переполнения, мы должны выяснить, что это такое. Проблема переполнения возникает, когда на веб-странице непреднамеренно появляется горизонтальная полоса прокрутки, позволяющая пользователю выполнять горизонтальную прокрутку. Это может быть вызвано разными факторами.

Это могло произойти из-за неожиданно широкого содержимого или элемента фиксированной ширины, который шире области просмотра. В этой статье мы рассмотрим все причины.

Познакомьтесь с потрясающими онлайн-семинарами по внешнему интерфейсу и пользовательскому интерфейсу с практическими выводами, сеансами в прямом эфире, видеозаписями и дружескими вопросами и ответами. О дизайн-системах, CSS/JS и UX. С Кэри Фишер, Стефаном Баумгартнером и многими другими.

Как обнаружить переполнение

Важной частью решения этой проблемы является ее замечание. Если мы знаем, когда и где это происходит, мы можем сосредоточиться на этой части веб-страницы. Существуют разные способы обнаружения переполнения: от ручной прокрутки влево или вправо до использования JavaScript.

Давайте рассмотрим способы обнаружения переполнения.

Прокрутка влево или вправо

Первый способ обнаружить проблему переполнения — это прокрутить страницу по горизонтали. Если вы можете прокручивать страницу, это предупреждение о том, что со страницей что-то не так.

Использование JavaScript для поиска элементов шире тела

Мы можем добавить фрагмент в консоль браузера, чтобы показать любые элементы шире основного текста. Это удобно для страниц с большим количеством элементов.

Набросок CSS в помощь

Применение схемы CSS ко всем элементам на странице дает нам подсказку об элементах, выходящих за пределы основной части страницы .

Более того, у Эдди Османи есть скрипт, который добавляет контур к каждому элементу на странице со случайным цветом.

Ярлык переполнения в Firefox

В Firefox есть полезная функция, которая сообщает, какие элементы вызывают переполнение. Надеюсь, другие браузеры добавят это!

Удаление элементов страницы

Еще один распространенный способ – открыть DevTools в браузере и начать удалять элементы один за другим. Как только проблема исчезнет, ​​вероятно, причиной является раздел, который вы только что удалили. Я считаю этот метод полезным в тех случаях, когда вы определили проблему, но не знаете, почему это происходит.

После того, как вы обнаружите, где происходит переполнение, будет проще создать сокращенный тестовый пример для дальнейшей отладки.

Распространенные проблемы с переполнением

Элементы фиксированной ширины

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

Использование Flexbox без упаковки

Как бы ни был полезен Flexbox, не позволять элементам переноситься на новую строку, когда нет свободного места, это рискованно.

Здесь гибкие элементы могут вызвать горизонтальное переполнение, если места недостаточно, чтобы разместить их все в одной строке:

Обязательно используйте flex-wrap: wrap, когда родительский элемент flex должен работать с разными размерами области просмотра.

Сетка CSS

При использовании сетки CSS важно учитывать адаптивность дизайна. Возьмите следующую сетку:

Приведенный выше пример отлично работает, если размер окна просмотра меньше 300 пикселей. Если это так, то произойдет переполнение.

Чтобы избежать такой проблемы, используйте сетку только при наличии достаточного места. Мы можем использовать медиа-запрос CSS следующим образом:

Длинные слова

Еще одна распространенная причина переполнения – длинное слово, которое не помещается в области просмотра. Это больше происходит на мобильных устройствах из-за ширины области просмотра.

Чтобы исправить это, нам нужно использовать свойство overflow-wrap.

Я написал подробную статью об обработке как короткого, так и длинного контента с помощью CSS.

Это исправление особенно полезно для контента, созданного пользователями. Прекрасным примером этого является ветка комментариев. Пользователь может вставить длинный URL в свой комментарий, и это должно быть обработано с помощью свойства overflow-wrap.

Минимальный размер контента в CSS Flexbox

Еще одна интересная причина переполнения — минимальный размер содержимого во Flexbox. Что это значит?

«По умолчанию гибкие элементы не уменьшаются ниже минимального размера содержимого (длины самого длинного слова или элемента фиксированного размера). Чтобы изменить это, установите свойство min-width или min-height».

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

Чтобы исправить это, мы можем либо использовать значение переполнения, отличное от visible , либо установить min-width: 0 для гибкого элемента.

Минимальный размер контента в сетке CSS

Как и в случае с Flexbox, у нас та же концепция минимального размера контента, что и в CSS Grid. Однако решение немного отличается. CSS-Tricks называет это «выбросом сетки».

Давайте рассмотрим проблему. Предположим, у нас есть обертка с боковым и основным разделами, выложенными сеткой CSS.

Кроме того, в основном разделе у нас есть прокручиваемый раздел, для которого я использовал flexbox.

Обратите внимание, что я не добавил flex-wrap , потому что хочу, чтобы flex-элементы находились в одной строке. Однако это не сработало и привело к горизонтальному переполнению.

Чтобы исправить это, нам нужно использовать minmax() вместо 1fr . Таким образом, минимальный размер содержимого основного элемента не будет автоматическим .

Отрицательные поля

Элемент, расположенный за пределами экрана, может вызвать переполнение. Обычно это связано с тем, что элемент имеет отрицательное поле.

В следующем примере у нас есть элемент с отрицательным полем, а язык документа — английский (т. е. слева направо).

Интересно, что когда элемент расположен на противоположной стороне, переполнения не происходит. Почему так?

Я недавно столкнулся с этой проблемой и написал об этом. Оказывается, такое поведение является преднамеренным. Согласно спецификации CSS:

«Пользовательские пользователи должны обрезать прокручиваемую область переполнения контейнеров прокрутки на сторонах начала блока и встроенного начала блока (таким образом, они ведут себя так, как если бы у них не было прокручиваемого переполнения на этой стороне)».

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

Если размещение элемента за пределами экрана действительно необходимо, обязательно примените overflow: hidden к родительскому элементу, чтобы избежать переполнения.

Изображения без максимальной ширины

Если вы заранее не позаботитесь о больших изображениях, вы увидите переполнение. Обязательно установите максимальную ширину: 100 % для всех изображений.

Единицы области просмотра

Использование 100vw имеет недостаток, заключающийся в том, что оно может вызвать переполнение, когда полоса прокрутки видна. В macOS значение 100vw подходит и не вызывает горизонтальной прокрутки.

В Windows полосы прокрутки по умолчанию всегда видны, поэтому может произойти переполнение.

Причина этого в том, что при значении 100vw не учитывается ширина вертикальной полосы прокрутки браузера. В результате ширина будет равна 100vw плюс ширина полосы прокрутки. К сожалению, для этого нет исправления CSS.

Однако мы можем использовать JavaScript для измерения ширины области просмотра, исключая полосу прокрутки.

Внедренная реклама

Объявления, внедряемые при загрузке страницы, могут вызвать переполнение, если они шире, чем их родительский элемент. Добавьте overflow-x: hidden к родительскому элементу, чтобы предотвратить это.

Перепроверьте каждое объявление на веб-сайте, чтобы убедиться, что оно не вызывает переполнения.

Является ли применение overflow-x: hidden to body хорошей идеей?

Использовать overflow-x: hidden — это все равно, что накладывать повязку, не решая проблему. Если у вас переполнение, то лучше решить корневую проблему.

Кроме того, применение overflow-x: hidden к элементу body не является хорошей идеей, потому что position: sticky не будет работать, если у родителя есть overflow-x: hidden .

Как избежать переполнения в CSS

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

Тестировать с реальным содержанием

Ничто не сравнится с тестированием реального контента на веб-сайте. При этом вы гарантируете, что макет может работать с различным контентом.

Учетная запись для пользовательского контента

Для таких компонентов, как цепочка комментариев, учитывайте случаи, когда пользователь будет вставлять длинный URL-адрес или вводить длинное слово, как описано выше.

Осторожно используйте CSS Grid и Flexbox

Какими бы полезными ни были CSS grid и flexbox, при неправильном использовании они могут легко вызвать переполнение. Как мы уже говорили, неиспользование flex-wrap: wrap может вызвать переполнение, как и grid-template-columns: 1fr 350px, когда экран уже 350 пикселей.

Утилиты для управления тем, как элемент обрабатывает содержимое, которое слишком велико для контейнера.

Используйте параметр overflow-visible, чтобы содержимое внутри элемента не обрезалось. Обратите внимание, что любое содержимое, выходящее за границы элемента, будет видно.

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

Используйте overflow-auto для добавления полос прокрутки к элементу в случае, если его содержимое выходит за границы этого элемента. В отличие от .overflow-scroll , которая всегда показывает полосы прокрутки, эта утилита показывает их только в том случае, если прокрутка необходима.

Используйте overflow-x-auto, чтобы при необходимости разрешить горизонтальную прокрутку.

Используйте overflow-y-auto, чтобы при необходимости разрешить вертикальную прокрутку.

Используйте overflow-x-scroll, чтобы разрешить горизонтальную прокрутку и всегда отображать полосы прокрутки, если операционная система не отключила постоянно видимые полосы прокрутки.

Используйте overflow-y-scroll, чтобы разрешить вертикальную прокрутку и всегда отображать полосы прокрутки, если операционная система не отключила постоянно видимые полосы прокрутки.

Используйте команду overflow-scroll, чтобы добавить полосы прокрутки к элементу. В отличие от .overflow-auto , который показывает полосы прокрутки только в случае необходимости, эта утилита показывает их всегда. Обратите внимание, что некоторые операционные системы (например, macOS) скрывают ненужные полосы прокрутки независимо от этого параметра.

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : overflow-scroll, чтобы применить утилиту overflow-scroll только при наведении курсора.

Полный список всех доступных модификаторов состояния см. в документации по наведению курсора, фокусу и другим состояниям.

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие точки останова, темный режим, предпочтения с уменьшенным движением и т. д. Например, используйте md: overflow-scroll, чтобы применить утилиту overflow-scroll только на средних размерах экрана и выше.

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.

Эрик Бидельман

Свойство CSS overscroll-behavior позволяет разработчикам переопределять стандартное поведение браузера при переполнении прокрутки при достижении верхней или нижней части содержимого. Варианты использования включают в себя отключение функции обновления по запросу на мобильных устройствах, удаление свечения при прокрутке и эффектов резиновой полосы, а также предотвращение прокрутки содержимого страницы, когда оно находится под модальным окном или наложением.

Фон

Границы прокрутки и цепочка прокрутки

Прокрутка – один из самых основных способов взаимодействия со страницей, но с некоторыми шаблонами пользовательского интерфейса может быть сложно справиться из-за необычного поведения браузера по умолчанию. В качестве примера возьмем ящик приложения с большим количеством элементов, которые пользователю, возможно, придется прокручивать. Когда они достигают дна, контейнер переполнения перестает прокручиваться, потому что больше нет содержимого для потребления. Другими словами, пользователь достигает «границы прокрутки». Но обратите внимание, что происходит, если пользователь продолжает прокручивать. Содержимое за ящика начинает прокручиваться! Прокрутка берется на себя родительским контейнером; сама главная страница в примере.

Оказывается, такое поведение называется цепочкой прокрутки; поведение браузера по умолчанию при прокрутке содержимого. Часто значение по умолчанию довольно приятно, но иногда оно нежелательно или даже неожиданно. В некоторых приложениях может потребоваться изменить взаимодействие с пользователем, когда пользователь достигает границы прокрутки.

Эффект обновления по нажатию

Потяните, чтобы обновить, – это интуитивно понятный жест, популярный в мобильных приложениях, таких как Facebook и Twitter. Потянув за социальную ленту и отпустив ее, вы создадите новое пространство для загрузки более свежих сообщений.Фактически, этот конкретный UX стал настолько популярен, что мобильные браузеры, такие как Chrome на Android, переняли тот же эффект. Если провести вниз вверху страницы, обновится вся страница:

Пользовательская функция Twitter для обновления
при обновлении фида в PWA. Встроенное в Chrome Android действие "потянуть для обновления"
обновляет всю страницу.

В таких ситуациях, как Twitter PWA, может иметь смысл отключить встроенное действие «потяните для обновления». Почему? В этом приложении вы, вероятно, не хотите, чтобы пользователь случайно обновлял страницу. Также есть возможность увидеть двойную анимацию обновления! В качестве альтернативы, может быть лучше настроить действие браузера, приблизив его к фирменному стилю сайта. К сожалению, этот тип настройки было сложно реализовать. Разработчики заканчивают тем, что пишут ненужный JavaScript, добавляют непассивные сенсорные слушатели (которые блокируют прокрутку) или помещают всю страницу в 100vw/vh

(чтобы страница не переполнялась). Эти обходные пути имеют хорошо задокументированные негативные последствия для производительности прокрутки.

Мы можем сделать лучше!

Введение в поведение при прокрутке

Свойство overscroll-behavior — это новая функция CSS, которая управляет поведением того, что происходит, когда вы прокручиваете контейнер (включая саму страницу). Вы можете использовать его, чтобы отменить цепочку прокрутки, отключить/настроить действие «тянуть для обновления», отключить эффекты «резиновой ленты» на iOS (когда Safari реализует overscroll-behavior) и многое другое. Самое приятное то, что использование overscroll-behavior не оказывает негативного влияния на производительность страницы, как хаки, упомянутые во вступлении!

Свойство принимает три возможных значения:

  1. авто — по умолчанию. Прокрутки, исходящие из элемента, могут распространяться на элементы-предки.
  2. contain — предотвращает цепочку прокрутки. Свитки не распространяются на предков, но отображаются локальные эффекты внутри узла. Например, эффект свечения сверхпрокрутки на Android или эффект резиновой ленты на iOS, который уведомляет пользователя, когда он достигает границы прокрутки. Примечание. Использование overscroll-behavior: contains в элементе html предотвращает действия навигации с переполнением.
  3. нет — то же, что и "содержать", но также предотвращает эффекты чрезмерной прокрутки в самом узле (например, свечение при чрезмерной прокрутке Android или резиновая полоса iOS).

Давайте рассмотрим несколько примеров, чтобы понять, как использовать overscroll-behavior .

Предотвратить выход прокрутки из элемента с фиксированной позицией

Сценарий чата

Представьте, что окно чата с фиксированным положением находится внизу страницы. Цель состоит в том, чтобы окно чата было автономным компонентом и чтобы оно прокручивалось отдельно от контента, находящегося за ним. Однако из-за цепочки прокрутки документ начинает прокручиваться, как только пользователь нажимает последнее сообщение в истории чата.

Для этого приложения более уместно, чтобы прокрутки, исходящие из окна чата, оставались в чате. Мы можем сделать это, добавив overscroll-behavior: contains к элементу, содержащему сообщения чата:

По сути, мы создаем логическое разделение между контекстом прокрутки окна чата и главной страницей. Конечным результатом является то, что главная страница остается на месте, когда пользователь достигает верхней или нижней части истории чата. Прокрутки, которые начинаются в окне чата, не распространяются наружу.

Сценарий наложения страницы

Еще один вариант сценария "недостаточной прокрутки" — когда вы видите, что содержимое прокручивается за оверлеем с фиксированной позицией. Мертвая раздача оверскролл-поведения в порядке! Браузер пытается быть полезным, но в итоге сайт выглядит глючным.

Пример – модальное окно с режимом прокрутки и без него: содержит :

Отключение обновления по запросу

Отключение действия «потянуть для обновления» — это одна строка CSS. Просто предотвратите цепочку прокрутки для всего элемента, определяющего область просмотра. В большинстве случаев это или :

Благодаря этому простому дополнению мы исправили анимацию двойного нажатия для обновления в демо-версии окна чата и вместо этого можем реализовать пользовательский эффект, который использует более аккуратную анимацию загрузки. Вся папка "Входящие" также размывается при ее обновлении:

Вот фрагмент полного кода:

Отключение свечения при прокрутке и эффектов резиновой ленты

Чтобы отключить эффект отскока при достижении границы прокрутки, используйте overscroll-behavior-y: none :

Полная демонстрация

Собирая все вместе, полная демонстрация окна чата использует режим переполнения, чтобы создать пользовательскую анимацию потянув для обновления и отключить прокрутку от выхода из виджета окна чата. Это обеспечивает оптимальное взаимодействие с пользователем, чего было бы сложно добиться без CSS overscroll-behavior .

Если не указано иное, содержимое этой страницы предоставляется по лицензии Creative Commons Attribution 4.0, а образцы кода — по лицензии Apache 2.0. Подробнее см. в Правилах сайта Google Developers. Java является зарегистрированным товарным знаком Oracle и/или ее дочерних компаний.

Читайте также: