Chrome 49'da sorunsuz kaydırma

Paul Lewis

Kullanıcıların kaydırmak istedikleri bir şey varsa o da kaydırmanın sorunsuz olmasıdır. Chrome geçmişte, örneğin, kullanıcılar dokunmatik yüzeylerle kaydırdığında veya mobil cihazda bir sayfayı kaydırdığında sorunsuz bir şekilde kaydırıyordu. Ancak, kullanıcının faresi takılı olduğunda, kaydırma davranışı daha titrek oluyor ve "adım adım" olarak belirleniyor. Bu da estetik açıdan çok daha fazla hoşnutsuz bir davranıştır. Chrome 49'da tamamen değişecek.

Pek çok geliştirici için basamaklı yerel, giriş odaklı kaydırma davranışının çözümü kitaplıklardan yararlanmak olmuştur. Bu uygulamanın amacı, kitaplıkları göze daha yumuşak ve hoş gelecek şekilde yeniden eşlemektir. Kullanıcılar da bunu uzantılar aracılığıyla yapar. Yine de kaydırmayı değiştiren kitaplıkların ve uzantıların olumsuz yanları vardır:

  • Olağanüstü bir vadi hissi. Bu durum kendini iki şekilde gösterir: Öncelikle bir sitede düzgün bir kaydırma davranışı olabilirken bir başkası olmayabilir. Bu nedenle kullanıcı, tutarsızlık nedeniyle zihin bulanıklığı yaşayabilir. İkinci olarak, kitaplığın akıcılık fiziği her zaman platformunkiyle uyuşmayabilir. Böylece hareket yumuşak olsa bile yanlış veya ürkütücü gelebilir.
  • Ana iş parçacığı çakışması ve jank için daha fazla eğilim. Sayfaya eklenen her JavaScript'te olduğu gibi, CPU yükü de artacaktır. Sayfanın ne yaptığına bağlı olarak bu her zaman bir felaket değildir. Ancak ana iş parçacığında uzun süredir devam eden bir çalışma varsa ve kaydırma ana iş parçacığına bağlanmışsa, net sonuç, kaydırmalarda kesintiler ve olumsuzluklar olabilir.
  • Geliştiriciler için daha fazla bakım, kullanıcıların indirebileceği daha fazla kod. Sorunsuz kaydırma yapmak için bir kitaplığa sahip olmak, güncel tutulması ve korunması gereken bir şey olacak ve sitenin toplam sayfa ağırlığını artıracaktır.

Bu dezavantajlar, genellikle paralaks efektleri veya kaydırmaya bağlı diğer animasyonlar gibi kaydırma davranışlarıyla ilgilenen birçok kitaplık için de geçerlidir. Bunların hepsi genellikle olumsuzlukları tetikler, erişilebilirliği engeller ve genellikle kullanıcı deneyimine zarar verir. Kaydırma web'in temel bir etkileşimidir ve bunu kütüphanelerle değiştirirken büyük özen gösterilmelidir.

Chrome 49'da varsayılan kaydırma davranışı Windows, Linux ve ChromeOS'i değiştirecek. Eski, basamaklı kaydırma davranışı kullanımdan kalkacak ve kaydırma varsayılan olarak pürüzsüz olacak! Kodunuzda herhangi bir değişiklik yapmanız gerekmez, yalnızca daha önce kullandığınız akıcı kaydırma kitaplıklarını kaldırabilirsiniz.

Kaydırmayla ilgili diğer özellikler

Eserlerde bahsetmeye değer başka özellikler de var. Çoğumuz paralaks, bir doküman parçasına yumuşak kaydırma gibi kaydırmayla birleştirilmiş efektler (example.com/#somesection gibi) tercih ederiz. Daha önce de belirttiğim gibi, günümüzde kullanılan yaklaşımlar hem geliştiriciler hem de kullanıcılar için çoğu zaman zararlı olabiliyor. Üzerinde çalışılmakta olan ve yardımcı olabilecek iki platform standardı vardır: Birleştirme İşletleri ve scroll-behavior CSS özelliği.

Houdini Dili

Birleştirici İşletleri, Houdini'nin bir parçasıdır ve henüz tam teknik özellikler geliştirilip uygulanmamıştır. Bununla birlikte, yamalar ortaya çıktıkça, birleştiricinin ardışık düzeninin bir parçası olarak çalıştırılan JavaScript yazmanıza olanak tanır. Bu da, genellikle paralaks gibi kaydırmayla birleşen efektlerin, mevcut kaydırma konumuyla mükemmel bir şekilde senkronize halde tutulacağı anlamına gelir. Kaydırma etkinliklerinin yalnızca düzenli olarak ana iş parçacığına gönderildiği (ve diğer ana iş parçacığı çalışmaları tarafından engellenebilen) bugünkü kaydırma yönteminin kullanılması, ileriye yönelik büyük bir atılım anlamına gelebilir. Compositor Worklets ile veya Houdini'nin sunduğu diğer heyecan verici yeni özelliklerle ilgileniyorsanız Houdini'nin teknik özellikleri olan Surma'nın Houdini'nin Tanıtımı makalesini inceleyin. Dilerseniz Houdini posta listesine de katkıda bulunabilirsiniz.

kaydırma davranışı

Parça tabanlı kaydırma söz konusu olduğunda scroll-behavior CSS özelliği de yardımcı olabilir. Denemek isterseniz uygulamanın Firefox'ta kullanıma sunulduğunu öğrenmekten memnun olacaksınız. Ayrıca, “Deneysel Web Platformu özelliklerini etkinleştir” işaretini kullanarak Chrome Canary'de bu özelliği etkinleştirebilirsiniz. <body> öğesini scroll-behavior: smooth olarak ayarlarsanız parça değişiklikleri veya window.scrollTo tarafından tetiklenen tüm kaydırmalar düzgün bir şekilde canlandırılır! Bu, aynı şeyi yapmaya çalışan bir kitaplıktan kod kullanıp sürdürmekten çok daha iyidir. Kaydırma gibi temel bir şeyde, kullanıcı beklentisini bozmamak çok önemlidir. Bu nedenle, bu özellikler aktifken bir İlerleme Geliştirme yaklaşımı benimsemeye ve bu davranışları çoklu doldurmaya çalışan kitaplıkları kaldırmaya değer.

İleri gidin ve kaydırın

Chrome 49 sürümünden itibaren kaydırma daha sorunsuz hale gelmektedir. Hepsi bu kadar değil: Houdini ve smooth-scroll gibi CSS mülkleri sayesinde elde edilebilecek potansiyel iyileştirmeler daha fazla. Chrome 49'u deneyin, ne düşündüğünüzü bize bildirin ve en önemlisi, tarayıcının mümkün olan her yerde kaydırma işlemini yapmasına izin verin!