“touch-action” özelliği, mobil cihazlarda dokunma (touch) etkinliğini kontrol etmek için kullanılır. Bu özellik, dokunmatik cihazlar için optimize edilmiş web siteleri tasarlarken oldukça kullanışlıdır.
“touch-action” özelliği, dokunma etkinliğini ele almak için beş farklı değer alabilir:
- auto: varsayılan davranışı korur ve dokunma olaylarını browser’a bırakır.
- none: dokunma olaylarını devre dışı bırakır.
- pan-x: yalnızca yatay kaydırmaları etkinleştirir.
- pan-y: yalnızca dikey kaydırmaları etkinleştirir.
- manipulation: Bu, browser’ın dokunma hareketlerine tepki vermesine izin verir ancak dokunma hareketlerinin sayfada herhangi bir eyleme yol açmasını önler.
Bu özelliği kullanarak, mobil cihazlarda kullanıcı deneyimini geliştirmek için çeşitli dokunma hareketleri için özelleştirilmiş işlevler oluşturabilirsiniz. Mesela, “touch-action: pan-x;” özelliğini kullanarak, yalnızca yatay kaydırmaları etkinleştirebiliriz, böylece kullanıcılara sayfanın yalnızca yatay olarak kaydırmasına izin verirken, dikey kaydırmalar devre dışı bırakılmış olur.
Ancak, bu özellik tüm tarayıcılarda tam olarak desteklenmemektedir. Bu nedenle, JavaScript kullanarak dokunma etkinliğini kontrol etmek mümkün kılınabilir.
“touch-action” ile bir galeri için dokunmatik kaydırmayı etkinleştirmenin nasıl kullanılabileceğini göstermeye çalışayım;
<div class="gallery">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<img src="image5.jpg">
</div>.gallery {
display: flex;
flex-wrap: nowrap;
overflow-x: scroll;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; /* Safari smooth scrolling */
touch-action: pan-y; /* Yalnızca dikey kaydırmaları etkinleştirir */
}
img {
width: 100%;
height: auto;
scroll-snap-align: center;
}“touch-action” özelliği kullanarak mobil oyun için dokunmatik hareketleri etkinleştirmek için nasıl kullanılabileceğine bakalım;
<div class="game">
<div class="player"></div>
<div class="obstacles"></div>
</div>.game {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
touch-action: none; /* Dokunma etkinliklerini devre dışı bırakır */
}
.player {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
background-color: red;
touch-action: pan-x; /* Yalnızca yatay kaydırmaları etkinleştirir */
}
.obstacles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
touch-action: manipulation; /* Dokunma hareketlerinin herhangi bir eyleme yol açmamasını önler */
}See the Pen touch-action (CSS) 2 by alptekinenes (@alptekinenes) on CodePen.
“player” sınıfı, oyunun karakterini olsun. “position: absolute”, “bottom: 0”, “left: 50%”, ve “transform: translateX(-50%)” özellikleri, karakterin alt kısımda ve yatay olarak ortalanmasını sağlar. “width: 50px”, “height: 50px”, ve “background-color: red” özellikleri, karakterin boyut ve rengini ayarlasın. “touch-action: pan-x” özelliği, yalnızca yatay kaydırmaları etkinleştirsin.
“obstacles” sınıfı, oyunun engellerini temsil etsin. “position: absolute”, “top: 0”, “left: 0”, “width: 100%”, ve “height: 100%” özellikleri, engellerin oyun alanının tamamını kaplamasını sağlasın. “touch-action: manipulation” özelliği, dokunma hareketlerini pasif edelim.
Bu sayede, oyun karakterinin yatay hareketlerinin ve dokunma hareketlerinin doğru şekilde etkinleştirilmesi sağlanırken, engellerin üzerine dokunulduğunda herhangi bir yanıt verilmesi engellenmiş oldu.