touch-action CSS özelliği, geliştiricilerin kullanıcıların bir öğeyle nasıl etkileşime geçebileceğini kısıtlamasına olanak tanır. Bu özellik, özellikle gerekli olmadığında etkinliklerin gönderilmesini önlemek için yararlıdır.
Chrome, 55 sürümünden önce öğelerin tek bir yönde kaydırılmasını kısıtlayan pan-x ve pan-y özelliklerini desteklemekteydi.
Aşağıdaki videoda, dokunma işlemi tanımlanmamış bir öğe (solda) ve pan-x ile pan-y (orta ve sağda) örnekleri gösterilmektedir.
Orta ve sağ el ekran kayıtları için CSS:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
Chrome 55'te pan-left, pan-right, pan-up ve pan-down eklendi. Bu mülklerin davranışında küçük ancak önemli bir fark vardır.
Bu özellikler, öğenin yanıt vermesi için kullanıcıyı bir yönde hareket etmeye zorlar. Bu, yalnızca kullanıcı ekranda aşağı doğru hareket ettiğinde yanıt veren "yenilemek için aşağı çekin" hareketine benzer.
Aşağıdaki videoda, sırasıyla sağdan sola ve aşağıdan yukarıya doğru hareketlerin yapılmasını gerektiren pan-right ve pan-down gösterilmektedir.
Hareket başladıktan sonra ekranı ileri geri kaydırabilirsiniz. Yalnızca ilk yön etkilenir.
Bu davranış videoda gösterilmektedir ancak denemeyi kendiniz yapmak isteyebilirsiniz. Bunun için örneğe göz atabilirsiniz.
Bu demo için CSS:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
Dokunma işlemi dünyasında son olarak pinch-zoom mülkü ele alınacaktır. Bu, Chrome 55'teki yeni bir mülktür.Bir işaretin arkasında yer alır ve kaydırma seçeneklerinden herhangi biriyle (ör. pan-x, pan-y, pan-left, pan-right, pan-down, pan-up) kullanılabilir.
Bir web sitesinde iki parmak ucunu yakınlaştırırsanız genellikle sayfa içeriği yakınlaştırılır.
touch-action tanımlamak bu davranışı önler ancak yakınlaştırma/uzaklaştırma özelliğini eklemek bu davranışı yeniden etkinleştirir.
Bu videoda touch-action: pan-x ile touch-action: pan-x pinch-zoom arasındaki fark gösterilmektedir;
Bu özelliklerin tümü, geliştiricilerin pointer-events'ü kullanarak uygulamak zorunda kalacağı mantık işlemlerinin bir kısmını basitleştirmelidir.