touch-action

Свойство touch-action позволяет контролировать то, как с элементом можно взаимодействовать на сенсорных экранах.

        
          
          .example {  touch-action: manipulation;}
          .example {
  touch-action: manipulation;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

У нас есть две одинаковые картинки внутри контейнеров, первую мы сможем скроллить, а вторую нет, так как установлено значение none у свойства touch-action.

        
          
          .touch-auto {  touch-action: auto;}.touch-none {  touch-action: none;}.map {  width: 350px;  height: 250px;  overflow: scroll;  position: relative;}.map img {  width: 640px;  height: 425px;}
          .touch-auto {
  touch-action: auto;
}

.touch-none {
  touch-action: none;
}

.map {
  width: 350px;
  height: 250px;
  overflow: scroll;
  position: relative;
}

.map img {
  width: 640px;
  height: 425px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          <div class="map touch-auto">  <img src="map.jpg" alt="Карта мира"></div><div class="map touch-none">  <img src="map.jpg" alt="Карта мира"></div>
          <div class="map touch-auto">
  <img src="map.jpg" alt="Карта мира">
</div>

<div class="map touch-none">
  <img src="map.jpg" alt="Карта мира">
</div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Свойство touch-action управляет взаимодействием с сенсорным экраном и напоминает более распространённое свойство pointer-events, которое регулирует взаимодействие мышкой.

Пригодится touch-action, например, чтобы отключить обработку прикосновений браузером по умолчанию на сенсорных экранах. Вместо неё можно реализовать свою логику с помощью JavaScript. Представьте, что при скролле карты вы хотите, чтобы она масштабировалась — придётся переопределять поведение.

Отключить дефолтное поведение можно и программно. Но с touch-action мы гарантируем, что браузер знает наши планы до того, как будут вызваны слушатели событий.

• none — запрещает все типы взаимодействий. Можно обрабатывать события при помощи JavaScript.
• auto — разрешает все типы взаимодействия (значение по умолчанию).
• manipulation — элемент можно сдвигать и зумить. Это сокращение для комбинации pan-x pan-y pinch-zoom. Остальные нестандартные жесты, вроде двойного тапа, запрещены.
• pan-x — элемент можно сдвигать по оси x с помощью одного пальца. Это сокращение для значений pan-left и pan-right. Может использоваться в сочетании с pan-y, pan-up, pan-down и pinch-zoom.
• pan-y — элемент можно смещать по оси y с помощью одного пальца. Это сокращение для значений pan-up и pan-down. Может использоваться в сочетании с pan-x, pan-left, pan-right и pinch-zoom.
• pan-left — элемент можно смещать только если начать движение от левого края (эксперимент).
• pan-right — элемент можно смещать только если начать движение от правого края (эксперимент).
• pan-down — элемент можно смещать только если начать движение снизу вверх (эксперимент).
• pan-up — элемент можно смещать только если начать движение сверху вниз (эксперимент).
• pinch-zoom — элемент можно зазумить щипком. Можно совместить с pan-x, pan-left, pan-right, pan-y, pan-up, pan-down.

💡 touch-action: none может помешать людям со слабым зрением читать страницу, если не предусматривается другая возможность увеличить содержимое.