Siz ve kullanıcılarınız dokunun. Bunları geliştirmek kolay olmalı ancak maalesef tarayıcıların kaydırma sırasında dokunma etkinliklerine tepki vermesi için bir uygulama olarak bırakılır TouchEvent spesifikasyonundaki ayrıntılardan da bahsedin. Farklı Sonuç olarak, yaklaşımlar kabaca 4 kategoriye ayrılabilir. Bu bu durum, sayfayı yumuşak bir kaydırma deneyimi ve geliştiricilerin sorumluluğundadır.
Dokunma etkinliği işlemenin dört farklı modeli nedir?
Tarayıcılar arasındaki davranış farklılıkları dört modele ayrılır.
Normal eşzamanlı etkinlik işleme
Dokunma etkinlikleri, kaydırma sırasında gönderilir ve dokunmayla taşıma işlemi tamamlanana kadar her kaydırma güncellemesi engellenir. Bu, anlaşılması en basit ve en güçlü olan ancak kaydırma performansı açısından kötü olduğu için iyidir çünkü kaydırma sırasındaki her bir karenin ana iş parçacığında engellemesi gerektiği anlamına gelir.
Tarayıcılar: Android Tarayıcı (Android 4.0.4, 4.3), Mobile Safari (div kaydırırken)
Eşzamansız dokunarak taşıma işleme
Dokunmayla taşıma etkinlikleri, kaydırma sırasında gönderilir, ancak kaydırma eşzamansız olarak devam edebilir (kaydırma başladıktan sonra dokunarak taşıma etkinliği yoksayılır). Bu da "iki kez işleme" yol açabilir. Örneğin, web sitesi Touchmove ile bir işlem yaptıktan sonra kaydırmaya devam etmek ve etkinlikte preventDefault çağrısı yaparak tarayıcının bu işlemi yapmamasını belirtmek.
Tarayıcılar: Mobile Safari (Doküman'ı kaydırırken), Firefox
Kaydırma sırasında dokunma hareketi engellendi
Dokunma etkinlikleri, kaydırma başladıktan sonra gönderilmez ve dokunma bitiş etkinliği bitene kadar devam ettirilmez. Bu modelde, sabit dokunma ile kaydırma arasındaki farkı anlamak zordur.
Tarayıcılar: Samsung Tarayıcı (mousemove etkinlikleri gönderildi)
Kaydırma başlatıldığında dokunma iptali
Bu özelliği iki şekilde de (kaydırma akıcılığı ve geliştirici kontrolü) kullanamazsınız. Bu model, İşaretçi Etkinlikleri spesifikasyonunun anlamına benzer şekilde, sorunsuz kaydırma ile etkinlik işleme arasındaki dengeyi netleştirir. Yenilemek için çekme gibi parmağı takip etmesi gerekebilecek bazı deneyimler mümkün değildir.
Tarayıcılar: Chrome Desktop M32+, Chrome Android
Neden Değiştirilsin?
Android için Chrome şu anda Chrome'un Eski Modelini kullanıyor: kaydırma sırasında dokunma iptali başlangıcı, kaydırma performansını artırır ancak geliştiricilerin kafasını karıştırır. Özellikle, bazı geliştiriciler dokunmayı iptal etme etkinliğinden veya sorun yaşandı. Bu da bazı web sitelerinin çökmesine yol açtı. Daha da önemlisi, kullanıcı arayüzü kaydırma efektleri ve davranışları sınıfının tamamı (ör. pull-to-refresh) gizlenen çubukları ve tutturma noktalarının uygulanması zor veya imkansızdır olur.
Bu efektleri desteklemek için özel olarak sabit kodlu özellikler eklemek yerine, Chrome, geliştiricilere olanak tanıyan temel platform öğeleri eklemeye odaklanmayı amaçlıyor doğrudan uygulamaktır. A Rasyonel Web Platformu'nu inceleyin bir çalışma olarak nitelendirebiliriz.
Chrome'un Yeni Modeli: Throttled Eş Zamansız Dokunmatik Hareket Modeli
Chrome yeni bir davranış sunuyor
diğer tarayıcılar için yazılmış kodla uyumluluğu artırmak üzere tasarlanmış
ve dokunma hareketine dayalı başka senaryolara olanak
etkinliklerdir. Bu özellik varsayılan olarak etkindir ve etkinleştirebilirsiniz.
chrome://flags\#touch-scrolling-mode bayrağıyla kapanacak.
Yeni davranış:
- İlk dokunma hareketi, kaydırmanın gerçekleşebilmesi için eş zamanlı olarak gönderilir. iptal edildi
- Etkin kaydırma sırasında
- Touchmove etkinlikleri eşzamansız olarak gönderilir
- 200 ms başına 1 etkinliğe veya CSS 15px eğim bölgesi başına throttled aşıldı
- Event.cancelable false değerine ayarlanır.
- Aksi takdirde, dokunarak taşıma etkinlikleri aktif kaydırma sırasında normal şekilde eşzamanlı olarak tetiklenir kaydırma sınırına ulaşıldığından sonlandığında veya bu mümkün değil
- Kullanıcı parmağını kaldırdığında bir temas noktası etkinliği her zaman gerçekleşir
Android için Chrome'da bu demoyu deneyebilir ve
chrome://flags\#touch-scrolling-mode işaretini tıklayın.
Düşüncelerinizi bizimle paylaşın
Eş zamansız Touchmove Modeli, tarayıcılar arası tarayıcıları iyileştirme potansiyeline sahip yeni bir dokunma hareketi efektleri sınıfını etkinleştirin. İlgileniyoruz geliştiricilerin düşüncelerini öğrenmek ve yapabileceğiniz yaratıcı şeyleri gerçekleşebilir.