При разработке на мобильном терминале мы часто сталкиваемся с необходимостью региональной прокрутки, конечно, это очень просто реализовать, задайте высоту элемента, который нужно прокрутить, а затем добавьтеoverflow-y:scorllЕстественно, вы можете прокручивать, но после добавления этого свойства нормально использовать Chrome или другие инструменты браузера для отладки, но эффект прокрутки очень странный, когда он на мобильном телефоне, и прокрутка заставит людей чувствовать себя застрявшими. В настоящее время использование свойства может решить эту проблему.-webkit-overflow-scrolling:touch, это свойство заставит полосу прокрутки вернуться назад, сделав прокрутку менее жесткой.
Это свойство определено в MDN следующим образом:
Свойство -webkit-overflow-scrolling определяет, использует ли элемент эффект прокрутки на мобильных устройствах. авто: при обычной прокрутке прокрутка немедленно останавливается, когда палец убирается с сенсорного экрана. касание: используйте эффект прокрутки с эффектом отскока, когда палец убирается с сенсорного экрана, содержимое будет продолжать прокручиваться в течение определенного периода времени. Скорость и продолжительность непрерывной прокрутки пропорциональны интенсивности жеста прокрутки. Также создается новый контекст стека.
Однако после установки этого свойства все будет нормально? Это не все так, на самом деле, в этом объекте еще есть ямы.
Иногда застревает или не скользит
Более распространенные проблемы:
- В сафари после использования -webkit-overflow-scrolling:touch страница иногда зависает.
- В сафари нажмите на другие области, а затем проведите пальцем по области прокрутки, ошибка, из-за которой полоса прокрутки не может прокручиваться.
- Динамическое добавление содержимого для открытия контейнера приводит к ошибке, которая вообще не может скользить.
Я также вижу, что другие столкнулись с той же проблемой в Интернете.
Иногда застревает, в Интернете есть разные мнения о решении, и встречается много одинаковых высказываний.Например, если застрял, добавление z-индекса может решить проблему.
После многих попыток это утверждение ни разу не решило проблему. Это утверждение может быть распространено, и может случиться так, что пользователь столкнулся с проблемами проникновения или уровня -webkit-overflow-scrolling:touch при его использовании в то время. Так что эта схема неприменима.
Вот несколько лучших решений:
Убедитесь, что для элемента, использующего этот атрибут, не задано позиционирование.
Если он иногда зависает, не устанавливайте позиционирование для элемента, использующего этот атрибут, или вручную устанавливайте позиционирование как статическое, что устранит некоторые ошибки, из-за которых страница иногда не может быть прокручена из-за позиционирования (относительного, фиксированного, абсолютного). .
Однако, если вы скользите вверх и продолжаете скользить пальцем вниз или продолжаете скользить вверх вниз, это все равно вызовет зависание (на самом деле вся страница подпрыгивает вверх и вниз). на самом деле является особенностью ios8 и выше.Если область прокрутки большая В какой-то момент пользователь не подумает, что это ошибка, если она маленькая, пользователь не будет знать, что произошло, и застрянет.
Если страница динамического контента не может быть прокручена, пусть высота дочернего элемента + 1
Если в элементе с атрибутом -webkit-overflow-scrolling:touch вы хотите открыть контейнер, динамически добавляя содержимое и запуская прокрутку, возникает ошибка, и страница зависает.
Метод заключается в добавлении 1% или 1px к высоте следующего дочернего элемента свойства webkit-overflow-scrolling:touch. Таким образом активно запуская полосу прокрутки.
main-inner {
min-height: calc(100% + 1px)
}
Почему есть застрявшая ошибка?
Эта ошибка возникает в ios8 и выше (не очень уверен, но на ios5~7 вам нужно вручную использовать translateZ(0) для включения аппаратного ускорения)
Safari использует встроенные элементы управления для прокрутки переполнения. Для веб-страниц с -webkit-overflow-scrolling будет создан UIScrollView, чтобы предоставить подуровень для использования модулем рендеринга.
-webkit-overflow-scrolling: другие точки соприкосновения
Кроме того, в этом свойстве есть много ошибок, включая, помимо прочего, следующие:
- Свойство scrollTop не изменяется во время прокрутки
- Жесты могут запускать прокрутку элемента через другие элементы
- Приостановить другие переходы при прокрутке
наконец
Если часть прокручиваемой области в проекте не особенно велика, не будет большой проблемой использовать -webkit-overflow-scrolling:touch напрямую, но если этого требуется много, вы можете рассмотреть возможность его использования.better-scrollЭта библиотека используется для прокрутки мобильной области.
Об авторе: Ли Чэнвэнь, инженер веб-интерфейса Reed Technology, хорошо разбирается в создании веб-сайтов, разработке общедоступных учетных записей WeChat, разработке апплетов WeChat, производстве мини-игр, корпоративном производстве WeChat, построении H5, сосредоточении внимания на интерфейсной структуре, взаимодействии дизайн, рендеринг изображений, анализ данных и т. д.
личный блог:LCW blog
Добро пожаловать, чтобы сражаться плечом к плечу с нами:web@talkmoney.cnдоступwww.talkmoney.cnпонять больше
Обеспечить производство общедоступных учетных записей WeChat в Шэньчжэне, разработку Guangdong DingTalk, профессиональный аутсорсинг WeChat для предприятий, экономичное создание апплета WeChat, надежное производство небольших игр, высококачественную разработку H5.