Daha uyumlu, daha akıcı bir dokunuş

Siz ve kullanıcılarınız tepki veren ve dokunmaya akıcı bir şekilde kaydıran mobil web uygulamaları istersiniz. Bunları geliştirmek kolay olmalıdır, ancak ne yazık ki mobil web tarayıcılarının kaydırma sırasında dokunma etkinliklerine nasıl tepki vereceğini, TouchEvent spesifikasyonunda bir uygulama ayrıntısı olarak bıraktık. Bunun sonucunda yaklaşımlar yaklaşık olarak 4 kategoriye ayrılabilir. Bu durum, kaydırmanın sorunsuz olması ile geliştirici kontrolünü koruma arasındaki temel gerilimi ortaya çıkarır.

Dokunma etkinliği işlemenin dört farklı modeli var mı?

Tarayıcılar arasındaki davranış farklılıkları, dört modele ayrılır.

  1. Normal eşzamanlı etkinlik işleme

    Dokunma taşıma etkinlikleri kaydırma sırasında gönderilir ve dokunma taşıma işlemi tamamlanana kadar her kaydırma güncelleme işlemi engellenir. Bu, anlaşılması en basit ve en güçlü, ancak kaydırma performansı açısından kötü olduğu için iyidir çünkü kaydırma sırasında her karenin ana iş parçacığında engellenmesi gerektiği anlamına gelir.

    Tarayıcılar: Android Tarayıcı (Android 4.0.4, 4.3), Mobile Safari (div kaydırılırken)

  2. Eşzamanlı dokunarak taşıma işleme

    Touchmove etkinlikleri kaydırma sırasında gönderilir, ancak kaydırma eşzamansız olarak devam edebilir (kaydırma başladıktan sonra touchmove etkinliği yok sayılır). Bu durum, etkinliklerin "iki kez işlenmesine" neden olabilir. Örneğin, web sitesi touchmove ile bir işlem yaptıktan sonra kaydırmaya devam etmeye devam eder ve etkinlikte preventDefault işlevini çağırarak tarayıcıya bunu işlememesini bildirir.

    Tarayıcılar: Mobile Safari (dokümanı kaydırırken), Firefox

  3. Kaydırma sırasında Touchmove atlandı

    Touchmove etkinlikleri, kaydırma başladıktan sonra gönderilmez ve dokunma sonu etkinliğinden sonra devam ettirilmez. Bu modelde sabit dokunma ile kaydırma arasındaki farkı ayırt etmek zordur.

    Tarayıcılar: Samsung Tarayıcı (mousemove etkinlikleri gönderildi)

  4. Kaydırmanın başlangıcında dokunmayı iptal et

    İki şekilde de (kaydırma yumuşaklığı ve geliştirici denetimi) sahip olamazsınız ve bu model, İşaretçi Etkinlikleri spesifikasyonunun anlamına benzer şekilde, yumuşak kaydırma ile etkinlik işleme arasındaki dengeyi net bir şekilde belirtir. Yenilemek için çekme gibi parmağı izlemesi gerekebilecek bazı deneyimler mümkün değildir.

    Tarayıcılar: Chrome Masaüstü M32+, Chrome Android

Neden Değişim?

Android için Chrome şu anda Chrome'un Eski Modelini kullanmaktadır: kaydırma başlangıcında "dokunmatik" iptal etme. Bu işlem, kaydırma performansını iyileştirir ancak geliştiricilerin kafasının karışmasına yol açar. Özellikle, bazı geliştiriciler touchcancel etkinliğinden veya bununla nasıl çalışacaklarından haberdar değildir ve bu da bazı web sitelerinin bozulmasına neden olmuştur. Daha da önemlisi, yenilemek için çek, gizlenen çubuklar ve tutturma noktaları gibi tüm kullanıcı arayüzü kaydırma efektleri ve davranışları sınıfının iyi uygulanması zor veya imkansızdır.

Chrome, bu efektleri desteklemek için özel olarak kodlanmış özellikler eklemek yerine, geliştiricilerin bu efektleri doğrudan uygulamasına olanak tanıyan temel platform öğeleri eklemeye odaklanmayı amaçlar. Bu felsefenin genel açıklaması için Rasyonel Web Platformu konusuna bakın.

Chrome'un Yeni Modeli: Kısıtlanmış Eş Zamansız Touchmove Modeli

Chrome, kaydırma sırasında diğer tarayıcılar için yazılmış kodla uyumluluğu iyileştirmek için tasarlanmış yeni bir davranış kullanıma sunuyor ve kaydırma sırasında touchmove etkinliklerine bağlı olan başka senaryolara olanak tanıyor. Bu özellik varsayılan olarak etkindir ve chrome://flags\#touch-scrolling-mode işaretini kullanarak kapatabilirsiniz.

Yeni davranış:

  • İlk dokunma taşıma işlemi, kaydırma işleminin iptal edilmesine olanak tanımak için eşzamanlı olarak gönderilir.
  • Aktif kaydırma sırasında
    • touchmove etkinlikleri eşzamansız olarak gönderilir
    • throttled başına 1 etkinliğe throttled veya CSS throttled eğim bölgesi aşılırsa
    • Event.cancelable: false
  • Aksi takdirde, etkin kaydırma sona erdiğinde veya kaydırma sınırına ulaşıldığından mümkün olmadığında, dokunarak taşıma etkinlikleri normal bir şekilde eşzamanlı şekilde etkinleşir
  • Kullanıcı parmağını kaldırdığında bir dokunmatik uç etkinliği her zaman gerçekleşir

Android için Chrome'da bu demoyu deneyebilir ve farkı görmek için chrome://flags\#touch-scrolling-mode işaretini açıp kapatabilirsiniz.

Düşüncelerinizi bizimle paylaşın

Eş Zamansız Touchmove Modeli, tarayıcılar arası uyumluluğu iyileştirme ve yeni bir dokunma hareketi efektleri sınıfını etkinleştirme potansiyeline sahiptir. Geliştiricilerin düşüncelerini öğrenmek ve bunlarla yapabileceğiniz yaratıcı şeyleri görmek istiyoruz.