CSS свойство touch-action

Опубликовано: 30 Января, 2022

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

Примечание. Панорамирование - это не что иное, как прокрутка одним пальцем на сенсорном экране.

Синтаксис:

 сенсорное действие: авто | нет | [[pan-x | пан-левая | pan-right] ||
 [пан-у | пан-вверх | панорама вниз] || масштабирование] | манипуляция

Стоимость имущества:

none: перестает поддерживать все действия, такие как жесты и панорамирование в браузере.
auto: поддерживает все действия, такие как жесты и панорамирование в браузере.
pan-x | pan-y: pan-x поддерживает взаимодействие с горизонтальным панорамированием, аналогично pan-y поддерживает вертикальное панорамирование.
пан-левая | пан-право | пан-вверх | панорамирование: как следует из названий, они поддерживают направление панорамирования влево, вправо, вверх и вниз.
Масштабирование пальцем: используется для увеличения и уменьшения изображения двумя пальцами при взаимодействии с экраном.
манипуляция: это комбинация взаимодействий pan-x pan-y pinch-zoom.

Пример 1: Следующий пример демонстрирует параметр touch-action: none .

Выход:

Example 2: The following example demonstrates the touch-action: auto option.

HTML

<!DOCTYPE html>
<html>
  
<style type="text/css">
    body {
        display: flex;
        flex-wrap: wrap;
    }
  
    .image {
        margin: 1rem;
        width: 300px;
        height: 300px;
        overflow: scroll;
        position: relative;
        margin-bottom: 15px;
    }
  
    .image img {
        width: 1200px;
        height: 1200px;
    }
  
    .touch-type {
        position: absolute;
        width: 100%;
        text-align: center;
        font-weight: bold;
        top: 130px;
        font-size: 24px;
    }
  
    .touch-auto {
        touch-action: auto;
    }
</style>
  
<body>
    <div class="image touch-auto">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png">
  
        <p class="touch-type">
            touch-action:auto - This means 
            you can pan anywhere on screen
        </p>
    </div>
</body>
  
</html>

Выход:

Example 3: The following example demonstrates the touch-action: pan-x option.

HTML

<!DOCTYPE html>
<html>
  
<style type="text/css">
    body {
        display: flex;
        flex-wrap: wrap;
    }
  
    .image {
        margin: 1rem;
        width: 300px;
        height: 300px;
        overflow: scroll;
        position: relative;
        margin-bottom: 15px;
    }
  
    .image img {
        width: 1200px;
        height: 1200px;
    }
  
    .touch-type {
        position: absolute;
        width: 100%;
        text-align: center;
        font-weight: bold;
        top: 130px;
        font-size: 24px;
    }
  
    .touch-pan-x {
        touch-action: pan-x;
    }
</style>
  
<body>
    <div class="image touch-pan-x">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png">
        <p class="touch-type">
            touch-action: pan-x;-This 
            means you can only scroll
            /pan in x-direction
        </p>
    </div>
</body>
  
</html>

Выход:

Example 4: The following example demonstrates the touch-action: pan-y option.

HTML

<!DOCTYPE html>
<html>
  
<style type="text/css">
    body {
        display: flex;
        flex-wrap: wrap;
    }
  
    .map {
        margin: 1rem;
        width: 300px;
        height: 300px;
        overflow: scroll;
        position: relative;
        margin-bottom: 15px;
    }
  
    .image img {
        width: 1200px;
        height: 1200px;
    }
  
    .touch-type {
        position: absolute;
        width: 100%;
        text-align: center;
        font-weight: bold;
        top: 130px;
        font-size: 24px;
    }
  
    .touch-pan-y {
        touch-action: pan-y;
    }
</style>
  
<body>
    <div class="image touch-pan-y">
  
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png">
        <p class="touch-type">
            touch-action: pan-y;-This 
            means you can only scroll
            /pan in y-direction
        </p>
    </div>
</body>
  
</html>

Выход:

Example 5: The following example demonstrates the touch-action: pan-right option.

HTML

<!DOCTYPE html>
<html>
  
<style type="text/css">
    body {
        display: flex;
        flex-wrap: wrap;
    }
  
    .image {
        margin: 1rem;
        width: 300px;
        height: 300px;
        overflow: scroll;
        position: relative;
        margin-bottom: 15px;
    }
  
    .image img {
        width: 1200px;
        height: 1200px;
    }
  
    .touch-type {
        position: absolute;
        width: 100%;
        text-align: center;
        font-weight: bold;
        top: 130px;
        font-size: 24px;
    }
  
    .touch-pan-right {
        touch-action: pan-right;
    }
</style>
  
<body>
    <div class="image touch-pan-right">
  
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/gfg-logo.png">
  
        <p class="touch-type">
            touch-action:pan-right;-This 
            means you can only scroll/pan 
            in right direction
        </p>
    </div>
</body>
  
</html>

Выход:

Picked CSS

CSS свойство touch-action

HTML

HTML

HTML

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ