Hem siz hem de kullanıcılarınız, dokunma hareketlerine tepki veren ve sorunsuz bir şekilde kaydırılan mobil web uygulamaları istersiniz. Bunları geliştirmek kolay olsa da maalesef mobil web tarayıcıları, kaydırma sırasında dokunma etkinliklerine nasıl tepki vereceğini TouchEvent spesifikasyonunda bir uygulama ayrıntısı olarak bırakıyor. Sonuç olarak, yaklaşımlar kabaca 4 kategoriye ayrılabilir. Bu durum, kaydırma pürüzsüzlüğü sağlama ile geliştirici kontrolünü sürdürme arasında temel bir gerilim olduğunu gösterir.
Dokunma etkinliği işlemeyle ilgili dört farklı model mi?
Tarayıcılar arasındaki davranış farklılıkları dört modele ayrılır.
Normal eşzamanlı etkinlik işleme
Dokunma hareketi etkinlikleri kaydırma sırasında gönderilir ve her kaydırma güncellemesi, dokunma hareketi işleme tamamlanana kadar engellenir. Bu yöntem, anlaşılması en kolay ve en güçlü yöntem olduğu için iyidir ancak kaydırma sırasında her çerçevenin ana iş parçacığında engellenmesi gerektiği anlamına geldiği için kaydırma performansı açısından kötüdür.
Tarayıcılar: Android Tarayıcı (Android 4.0.4, 4.3), Mobil Safari (div kaydırıldığında)
Eşzamansız touchmove işleme
Dokunma hareketi etkinlikleri, kaydırma sırasında gönderilir ancak kaydırma işlemi eşzamansız olarak devam edebilir (kaydırma işlemi başladıktan sonra dokunma hareketi etkinliği yoksayılır). Bu durum, etkinliklerin "çift şekilde işlenmesi" ile sonuçlanabilir. Örneğin, web sitesi touchmove ile bir işlem yaptıktan ve etkinlikte preventDefault'i çağırarak tarayıcıya bu etkinliği işlememesini söyledikten sonra kaydırmaya devam edilmesi.
Tarayıcılar: Mobil Safari (belge kaydırıldığında), Firefox
Kaydırırken dokunma hareketi engellendi
Dokunma hareketi etkinlikleri, kaydırma başladıktan sonra gönderilmez ve dokunma sonu etkinliğinden sonra devam etmez. Bu modelde, sabit bir dokunuş ile kaydırma arasındaki farkı anlamak zordur.
Tarayıcılar: Samsung Tarayıcı (mousemove etkinlikleri gönderilir)
Kaydırma başlangıcında dokunmatik iptal
Hem kaydırma pürüzsüzlüğü hem de geliştirici kontrolüne sahip olamazsınız. Bu model, İşaretçi Etkinlikleri spesifikasyonunun semantikasına benzer şekilde, pürüzsüz kaydırma ve etkinlik işleme arasındaki dengeyi netleştirir. Parmağı izlemenin gerekebileceği bazı deneyimler (ör. kaydırarak yenileme) kullanılamaz.
Tarayıcılar: Chrome Masaüstü M32 ve üzeri, Chrome Android
Neden Değişiklik Yapıyoruz?
Android için Chrome şu anda Chrome'un eski modelini kullanıyor: Kaydırma işleminin başlangıcında touchcancel. Bu model, kaydırma performansını iyileştirir ancak geliştiricilerde kafa karışıklığına yol açar. Özellikle bazı geliştiriciler touchcancel etkinliğinden veya bu etkinlikle nasıl başa çıkılacağından haberdar değildir. Bu da bazı web sitelerinin çalışmamasına neden olmuştur. Daha da önemlisi, yenilemek için kaydır, gizli çubuklu ve sabitleme noktaları gibi kullanıcı arayüzü kaydırma efektleri ve davranışlarının tüm sınıfının iyi bir şekilde uygulanması zordur veya imkansızdır.
Chrome, bu efektleri desteklemek için özel olarak kodlanmış özellikler eklemek yerine, geliştiricilerin bu efektleri doğrudan uygulamasını sağlayan platform temel öğeleri eklemeye odaklanmayı amaçlamaktadır. Bu felsefenin genel bir açıklamasını A Rational Web Platform (Rasyonel Bir Web Platformu) başlıklı makalede bulabilirsiniz.
Chrome'un Yeni Modeli: Yavaşlatılmış Arayüz Uyumlu Dokunma Hareketi Modeli
Chrome, kaydırma sırasında diğer tarayıcılar için yazılmış kodla uyumluluğu iyileştirmek ve kaydırma sırasında touchmove etkinlikleri almaktan etkilenen diğer senaryoları etkinleştirmek üzere tasarlanmış yeni bir davranış kullanıma sunuyor. Bu özellik varsayılan olarak etkindir ve chrome://flags\#touch-scrolling-mode bayrağıyla devre dışı bırakılabilir.
Yeni davranış şu şekildedir:
- Kaydırma işleminin iptal edilmesine olanak tanımak için ilk dokunma hareketi eşzamanlı olarak gönderilir.
- Etkin kaydırma sırasında
- touchmove etkinlikleri eşzamansız olarak gönderilir.
- 200 ms başına 1 etkinliğe sınırlı veya CSS 15 piksel eğim bölgesi aşıldıysa
- Event.cancelable false değerine sahip
- Aksi takdirde, etkin kaydırma sona erdiğinde veya kaydırma sınırına ulaşıldığı için mümkün olmadığında touchmove etkinlikleri normal şekilde senkronize olarak tetiklenir.
- Kullanıcı parmağını kaldırdığında her zaman bir dokunma sonu etkinliği gerçekleşir.
Android için Chrome'da bu demoyu deneyebilir ve farkı görmek için chrome://flags\#touch-scrolling-mode işaretini etkinleştirip devre dışı bırakabilirsiniz.
Düşüncelerinizi bizimle paylaşın
Asenkron dokunma hareketi modeli, tarayıcılar arası uyumluluğu iyileştirme ve yeni bir dokunma hareketi efekti sınıfı etkinleştirme potansiyeline sahiptir. Geliştiricilerin bu konudaki görüşlerini öğrenmek ve bu kitaplıkla neler yapabileceğinizi görmek isteriz.