Свойство touch-action CSS
Дата публикации: 2017-05-11
От автора: свойство touch-action CSS определяет, может ли пользователь взаимодействовать с элементом на экране с помощью касаний, используя стандартные возможности браузера, а также как это будет происходить. Например, панорамирование и зум.
События касаний – это Web API, позволяющее браузеру интерпретировать действия пальцами или стилусом на сенсорном экране или трекпаде. Обычно события касаний мы обрабатываем через JS, однако touch-action позволяет информировать браузер о намерениях приложения еще до срабатывания обработчиков событий.
Результат касания элемента зависит от значения свойства touch-action и стандартных настроек касания элемента и его предков. Разработчики могут выборочно отключать стандартное поведение при касании экрана, предотвращая тем самым отправку, если поведение не требуется.
Свойство touch-action применяется только к элементам, которые поддерживают оба CSS-свойства width и height. Элементам без явно прописанных размеров типа span можно задать свойство display в значение, поддерживающее width и height, например, block.
Синтаксис
Синтаксис: touch-action: auto | none | [ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] ] | manipulation
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Изначально: auto
Применяется к: всем элементам кроме: незаменяемых инлайновых элементов, строк таблиц, групп строк, колонок таблиц и групп колонок
Анимируется: нет
Значения
auto. Значение по умолчанию. Браузер пользователя может определить разрешенное поведение при касании элемента.
manipulation. На элементе разрешено панорамирование и зум пальцами. Можно считать сокращением для pan-x pan-y pinch-zoom. Дополнительные нестандартные жесты типа двойного тапа запрещены.
none. На элементе запрещены стандартные поведения при касании.
pan-x. Разрешено панорамирование пальцами по оси Х. Можно совместить с pan-y, pan-up, pan-down и зумом пальцами. См. официальный синтаксис.
pan-y. Разрешено панорамирование пальцами по оси Y. Можно совместить с pan-x, pan-up, pan-down и зумом пальцами. См. официальный синтаксис.
pan-left. Панорамирование пальцами разрешено только, если действие начинается с панорамирования влево. То есть пользователь перемещает палец вправо. После начала прокрутки направление можно изменить на противоположное.
pan-right. Панорамирование пальцами разрешено только, если действие начинается с панорамирования вправо. То есть пользователь перемещает палец влево. После начала прокрутки направление можно изменить на противоположное.
pan-up. Панорамирование пальцами разрешено только, если действие начинается с панорамирования вверх. То есть пользователь перемещает палец вниз. После начала прокрутки направление можно изменить на противоположное.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
pan-down. Панорамирование пальцами разрешено только, если действие начинается с панорамирования вниз. То есть пользователь перемещает палец вверх. После начала прокрутки направление можно изменить на противоположное.
pinch-zoom. Разрешен зум несколькими пальцами. Можно совместить с pan-x, pan-left, pan-right, pan-y, pan-up, pan-down. См. официальный синтаксис.
Примеры
По умолчанию в браузере заданы жесты касаний, но иногда бывают элементы со своим кастомным функционалом зума или перетаскивания. Отключить стандартное поведение браузера можно с помощью значения none.
Источник
CSS3 свойство webkit-переполнение-прокрутка: ошибка касания
iOS 5 выпустила веб-дизайнеры новое свойство -webkit-overflow-scrolling:touch который использует аппаратный ускоритель устройств iOS для обеспечения собственной прокрутки для прокручиваемого div.
при реализации на наш сайт в разработке, он работает, но не очень хорошо. Я считаю, что может быть проблема CSS, поэтому я спрашиваю здесь.
следующее скрипка покажет вам, что он работает отлично
Если вы перейдете на наш сайт в разработке, вы найдете ту же панель под объектами вкладка, но на iOS, хотя прокрутка идеальна, переполненный раздел не отображается с картинками, буквально разрезанными на две части.
8 ответов:
как указал @relluf, применение 3D-переходов к относительному элементу исправляет ошибку. Тем не менее, я исследовал его немного дальше, и кажется, что применение -webkit-transform: translateZ(0px) работает тоже (это то, что Google делает на gmaps Map container), и это не должно быть на относительно позиционированном элементе, просто прямой потомок прокручиваемого элемента.
поэтому, если вы не хотите вручную хранить список всех мест, где требуется исправление, вы просто можете сделать:
какой Жук они выпустили здесь. Пробовал всевозможные обходные пути, пока я, наконец, не нашел единственное свойство, необходимое для правильного отображения элементов в -webkit-overflow-scrolling:touch div: position: static
относительные и абсолютные позиционированные элементы всегда отрезаны на границе и полностью отсутствуют (за исключением пустого пространства) за ее пределами. При динамическом изменении свойства position со статического на абсолютное сохраняется только видимая часть прокручиваемого окна просмотра div визуализируется, где бы ни было смещение.
Я также столкнулся с этой ошибкой. Я исправил это, применив следующий css к родительским элементам:
однако я заметил, что это замедляет рендеринг и может выбрать другие элементы ввода, чем требуется, когда сенсорный элемент ввода прокручивается в центр представления (Safari/iOS).
Я глубоко исследовал эту ошибку, я также создал jsfiddle и представил его в Apple отчет об ошибке. Пожалуйста, смотрите: изображения iOS5 исчезают при прокрутке с помощью webkit-overflow-scrolling: touch Как только Apple ответит мне, я сообщу об этом на эту тему, чтобы вы могли оставаться в курсе этой очень раздражающей ошибки
Я также испытал проблему, когда переполнение прокрутки с помощью-webkit-overlfow-scrolling set to touch привело к проблемам перерисовки с расположенными элементами. В моем случае у меня был список, где отдельные элементы имели относительное позиционирование, чтобы я мог использовать позиционирование на своих дочерних элементах. С вышеуказанным CSS на iOS 5, когда пользователь прокручивал скрытый контент в поле зрения, была мгновенная задержка, прежде чем он перерисовал экран для просмотра элементов. Это действительно раздражало. К Счастью, Я обнаружьте, что если я также дал относительное положение родительского узла, это было решено.
в iOS, когда элемент внутри элемента с -webkit-overflow-scrolling: touch set позиционируется абсолютно (или fixed ) относительно элемента вне контейнера прокрутки, элемент отображается только один раз, и рендеринг не обновляется при прокрутке элемента. Пример HTML:
если вы принудительно рендерите, изменив свойство CSS (например, в инспекторе), вы можете увидеть, что позиционирование элемента повторно отображается в правильном месте. Я подозреваю, что это результат некоторых функций производительности для оптимизации производительности прокрутки.
решение этой проблемы состоит в том, чтобы установить will-change: transform на абсолютно (или фиксированном) позиционированном элементе.
ошибка все еще живет в iOS 6. Если ваша проблема связана с position: relative , вы можете решить эту проблему, устанавливая z-index: 1 временно через JS. -webkit-transform: translate(. ) не работает с position: relative в моем случае.
я попробовал несколько различных решений, казалось, не работает идеально в моем случае.
наконец-то я нашел способ отлично работает с jQuery:
применить-webkit-переполнение-прокрутка свойство каждый раз, когда вы касаетесь.
*сначала я применил также — webkit-overflow-scrolling: auto, когда гол, чтобы отключить рендеринг iOS. Но это заставило Пейджа моргнуть. Поэтому я бросил его, а затем отлично работает удивительно!
Проверьте строки ниже, надеюсь, что это поможет:
Источник
CSS и iOS Safari
Всегда хочется, что бы твой сайт выглядел одинаково хорошо на разных устройствах, включая и мобильные. Но, если поведение в браузерах Android во многом предсказуемо, то с iOS возникает ряд «сюрпризов». О них сегодня и поговорим!
Часть примеров уже публиковалась на Хабре, но я все-равно решил включить их в статью. Разделю статью на две части. В первой – приведу список полезных css-свойств для webkit, а во второй поговорим о фиксах проблем, возникающих при версте для iOS Safari.
Свойства
1. -webkit-overflow-scrolling: touch
Это css-свойство добавит плавный скролл в блоках с overflow: scroll. Рекомендую добавлять это свойство везде, где внутри блока может возникать прокрутка, к примеру, в мобильном меню.
2. -webkit-text-size-adjust: none
Отключает масштабирование текста в горизонтальной ориентации.
3. -webkit-tap-highlight-color: #ccc
Устанавливает цвет выделения активного элемента при тапе на нем (a, label). По умолчанию это серый цвет, и часто может быть ни к чему, или выбиваться из общего дизайна.
Пример такого выделения:
4. -webkit-appearance: none
Отключает наложение на элементы стилей системы: тени, border-radius и т.д. Применяется для input (но не всех), textarea, и т.д. Удобно, когда надо задать единый вид элементов на всех устройствах.
Применяется не только в верстке для Safari.
Данный медиа-запрос позволит отдельно прописывать стили только для устройств, с поддержкой тач. Таким образом, на тач-устройствах можно отключить лишние анимации, ненужные данным типам устройств.
Можно использовать не только в верстке для Safari.
Фиксы
1. background-attachment: fixed
Проблема: background-attachment: fixed не работает в iOS Safari.
Решение: Фиксировать не фон, а блок или псевдоэлемент.
2. Нежелательный скролл модального окна
Проблема: Это довольно редкий случай, но для общей информации, думаю, так же полезно будет знать о нем. Если модальное окно имеет собственную прокрутку и в закрытом состоянии просто установлен отрицательный z-index (и, к примеру, opacity: 0) — то при попытке скролла страницы, модальное окно может перехватить скролл. В результате чего не будет осуществляться прокрутка страницы.
Решение: Добавляем pointer-events: none к модальному окну в закрытом состоянии.
3. Пропадание меню при скролле
Для того, что бы меню «прилипало» к верхней границе экрана при скролле страницы, часто используют следующий прием. Изначально у меню установлено свойство position: absolute, и при достижении верхней границы окна, через js оно меняется на fixed. А при скролле страницы к началу, значение опять меняется на absolute.
Проблема: В Safari на iOS, при смене position с fixed на absolute, меню пропадает с экрана пока скролл не завершится.
Решение: Использовать для меню position: -webkit-sticky. Поведение меню будет сравнимо с вышеописанным, но пропадать ничего не будет! Плюс, не надо использовать js
К слову, значение sticky для свойства position сейчас поддерживается большим количеством браузеров, поэтому его можно использовать и в десктопных браузерах.
4. Блок с position: fixed при скролле
Если реализации решений предыдущих проблем я видел на некоторых сайтах, то данная проблема на сайтах встречается постоянно.
Проблема: При скролле в браузере изменяется высота экрана. Отсюда, если при раскрытом меню или модальном окне не блокировать скролл, возникает подобный эффект:
Решение: Нужно сделать следующий «трюк», используя transform.
Величина в 70px покрывает разницу в изменении высоты окна. И только transform позволяет прорисовывать фон элемента за пределами экрана в данной ситуации.
Выводы
А выводов особо нет, просто пользуйтесь ) Если знаете еще полезные css-свойства или «фиксы», применимые на практике, пишите в комментариях!
Спасибо за внимание!
Update
В свойствах изменен пункт 5. Т.к. media (hover) имеет узкую поддержку. Спасибо dom1n1k за ценное замечание.
Источник
Disable scrolling when touch moving certain element
I have a page with a section to sketch a drawing in. But the touchmove events, at least the vertical ones, are also scrolling the page (which degrades the sketching experience) when using it on a mobile browser. Is there a way to either a) disable & re-enable the scrolling of the page (so I can turn it off when each line is started, but turn it back on after each is done), or b) disable the default handling of touchmove events (and presumably the scrolling) that go to the canvas the sketch is drawn in (I can’t just disable them completely, as the sketching uses them)?
I’ve used jquery-mobile vmouse handlers for the sketch, if that makes a difference.
Update: On an iPhone, if I select the canvas to be sketched in, or just hold my finger for a bit before drawing, the page doesn’t scroll, and not because of anything I coded in the page.
8 Answers 8
Set the touch-action CSS property to none , which works even with passive event listeners:
Applying this property to an element will not trigger the default (scroll) behavior when the event is originating from that element.
Note: As pointed out in the comments by @nevf, this solution may no longer work (at least in Chrome) due to performance changes. The recommendation is to use touch-action which is also suggested by @JohnWeisz’s answer.
Similar to the answer given by @Llepwryd, I used a combination of ontouchstart and ontouchmove to prevent scrolling when it is on a certain element.
Taken as-is from a project of mine:
Essentially, what I am doing is listening on the touch start to see whether it begins on an element that is a child of another using jQuery .closest and allowing that to turn on/off the touch movement doing scrolling. The e.target refers to the element that the touch start begins with.
You want to prevent the default on the touch move event however you also need to clear your flag for this at the end of the touch event otherwise no touch scroll events will work.
This can be accomplished without jQuery however for my usage, I already had jQuery and didn’t need to code something up to find whether the element has a particular parent.
Tested in Chrome on Android and an iPod Touch as of 2013-06-18
Источник