Özet
CSS overscroll-behavior
özelliği, geliştiricilerin
üst/alt kısmına ulaştığında tarayıcının varsayılan taşma kaydırma davranışı
içerik. Kullanım alanları arasında, yenilemek için çekme işlevini devre dışı bırakmak yer alır.
mobil cihazlarda kaydırma efektlerini,
ve sayfa içeriğinin bir kalıcı/yer paylaşımı altındayken kaymasının önlenmesi.
Arka plan
Kaydırma sınırları ve kaydırma zinciri
Kaydırma, bir sayfayla etkileşimde bulunmanın en temel yollarından biridir, ancak Tarayıcının alışılmadık yapısı nedeniyle bazı kullanıcı deneyimi kalıplarıyla başa çıkması zor olabilir. varsayılan davranışlar. Örneğin, yüksek miktarda fotoğraf içeren bir uygulama çekmecesi öğeler arasından seçim yapabilirsiniz. En alta ulaştıklarında, taşma kapsayıcısı, tüketilecek başka içerik kalmadığı için kaydırmayı durdurur. Başka bir deyişle kullanıcı "kaydırma sınırına" ulaştığından emin olun. Ancak kullanıcı bu reklamları görmeye devam ederse ne olduğuna kaydırabilirsiniz. Çekmecenin arkasındaki içerik kaymaya başlar. Kaydırma (şimdiki değeri) üst kapsayıcı tarafından ele geçirildiğinden; ana sayfanın kendisi gösterilir.
Bu davranışa kaydırma zinciri adı verilir; tarayıcının varsayılanı gösteren bir e-posta alırsınız. Varsayılan ayar çoğu zaman oldukça iyidir ancak bazen istenen, hatta beklenmedik durumlarla karşılaşılabilir. Bazı uygulamalar Kullanıcı kaydırma sınırına ulaştığında farklı bir kullanıcı deneyimi sağlar.
Yenilemek için çekme efekti
Yenilemek için çekme, aşağıdakiler gibi mobil uygulamalar tarafından popüler hale gelen sezgisel bir harekettir: Facebook ve Twitter. Bir sosyal medya feed'ini aşağı çekip yayınlamak, yeni Daha yeni yayınların yüklenmesi için yer açın. Aslında bu kullanıcı deneyimi o kadar popüler hale geldi ki Android üzerinde Chrome gibi mobil tarayıcılar aynı etkiyi yaratır. Sayfanın üst kısmından aşağı doğru kaydırdığınızda tüm sayfa yenilenir:
Twitter PWA gibi durumlarda
yerel yenilemek için çekme işlemini devre dışı bırakmak mantıklı olabilir. Neden? Burada
uygulamada, muhtemelen kullanıcının sayfayı yanlışlıkla yenilemesini istemezsiniz. Evet,
bir çift yenileme animasyonu görebilirsiniz. Alternatif olarak
sitenizin işlevselliğine daha yakın bir şekilde hizalayarak, daha uygun bir
marka bilinci oluşturma. Ne yazık ki bu tür özelleştirmeler, özellikle de
zor olabilir. Geliştiriciler gereksiz JavaScript'ler yazar,
pasif değil
dinleyicilere dokunun (kaydırmayı engeller) veya sayfanın tamamını 100 vw/vh olarak tutun
<div>
(sayfanın taşmasını önlemek için). Bu çözümler,
iyi belgelenmiş olumsuz
arasındaki farkları inceledik.
Daha iyisini yapabiliriz.
overscroll-behavior
ile tanışın
overscroll-behavior
özelliği, aşağıdakileri kontrol eden yeni bir CSS özelliğidir:
bir kapsayıcıyı fazla kaydırdığınızda olanların davranışını (
yapabilirsiniz. Kaydırma zincirini iptal etmek, görünümü devre dışı bırakmak/özelleştirmek için
yenileme için çekme işlemi, iOS'te lastik bant oluşturma efektlerini devre dışı bırakın (Safari
overscroll-behavior
) ve daha fazlasını uygular.
En iyi yanı da, overscroll-behavior
kullanımının olumsuz yönde etkilenmemesidir.
özellikle de girişte bahsedilen hileler gibi sayfa performansına bakın.
Bu özellik üç olası değer alır:
- auto - Varsayılan. Öğede bulunan kaydırmalar üst öğeler olarak tanımlanır.
- contain: Kaydırma zincirini önler. Kaydırmalar üst öğelere yayılmaz
ancak düğüm içindeki yerel efektler gösterilir. Örneğin, fazla kaydırma yapıldığından
veya iOS'teki lastik bantlanma etkisine bağlı olarak kullanıcının bilgilendirilmesi
olduğunu varsayalım. Not:
html
öğesi üzerindekioverscroll-behavior: contain
, fazla kaydırmayı önler gezinme eylemleriyle ilgilidir. - none:
contain
ile aynıdır ancak düğümün kendisi (ör. Android fazla kaydırma parlaması veya iOS kauçuk kısmı).
overscroll-behavior
kullanımını görmek için birkaç örneği inceleyelim.
Kaydırma işlemlerinin sabit konumlu bir öğeden çıkmasını engelle
Sohbet kutusu senaryosu
Sayfanın alt kısmında bulunan sabit yerleştirilmiş bir sohbet kutusu düşünün. İlgili içeriği oluşturmak için kullanılan Chatbox'ın bağımsız bir bileşen olması ve sayfada aşağı doğru içeriklerinden farklıdır. Ancak, kaydırma zinciri nedeniyle Kullanıcı sohbetteki son mesaja ulaştığında doküman kaydırmaya başlıyor geçmişi'ne dokunun.
Bu uygulama için,
sohbetin içinde kalması sağlanır. Bunu, açılış sayfasına
Sohbet mesajlarını içeren öğeye overscroll-behavior: contain
:
#chat .msgs {
overflow: auto;
overscroll-behavior: contain;
height: 300px;
}
Esas olarak, sohbet kutusundaki kaydırmayla ile ana sayfaya bakın. Bunun sonucunda, ana sayfa Kullanıcı sohbet geçmişinin en üstüne/en altına ulaşır. sohbet kutusu dağıtılmaz.
Sayfa yerleşimi senaryosu
"Alt kaydırma" işlevinin başka bir varyasyonu gördüğünüz gibi içeriğin
sabit konum yer paylaşımının arkasına kaydırılabilir. Ölümcül bir hediye
overscroll-behavior
hazır. Tarayıcı yardımcı olmaya çalışıyor, ancak
sonuçta sitenin hatalı görünmesine neden olur.
Örnek - overscroll-behavior: contain
içeren ve içermeyen kalıcı:
Yenilemek için çekme seçeneğini devre dışı bırakma
Yenilemek için çekme işlemini kapatmak CSS'ye ait tek bir satırdır. Sadece
görüntü alanını tanımlayan öğenin tamamında kaydırma zincirlemesi yer alır. Çoğu durumda bu,
<html>
veya <body>
:
body {
/* Disables pull-to-refresh but allows overscroll glow effects. */
overscroll-behavior-y: contain;
}
Bu basit eklemeyle, yenileme için çift çekme animasyonlarını sohbet kutusu demosunu bunun yerine daha düzgün bir yükleme animasyonu kullanan özel bir efekt uygulayın. İlgili içeriği oluşturmak için kullanılan Gelen kutusu yenilenirken gelen kutusunun tamamı da bulanıklaştırılır:
Burada tam kod:
<style>
body.refreshing #inbox {
filter: blur(1px);
touch-action: none; /* prevent scrolling */
}
body.refreshing .refresher {
transform: translate3d(0,150%,0) scale(1);
z-index: 1;
}
.refresher {
--refresh-width: 55px;
pointer-events: none;
width: var(--refresh-width);
height: var(--refresh-width);
border-radius: 50%;
position: absolute;
transition: all 300ms cubic-bezier(0,0,0.2,1);
will-change: transform, opacity;
...
}
</style>
<div class="refresher">
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
<div class="loading-bar"></div>
</div>
<section id="inbox"><!-- msgs --></section>
<script>
let _startY;
const inbox = document.querySelector('#inbox');
inbox.addEventListener('touchstart', e => {
_startY = e.touches[0].pageY;
}, {passive: true});
inbox.addEventListener('touchmove', e => {
const y = e.touches[0].pageY;
// Activate custom pull-to-refresh effects when at the top of the container
// and user is scrolling up.
if (document.scrollingElement.scrollTop === 0 && y > _startY &&
!document.body.classList.contains('refreshing')) {
// refresh inbox.
}
}, {passive: true});
</script>
Fazla kaydırma parlaması ve lastik bantlama efektleri devre dışı bırakılıyor
Kaydırma sınırına dokunulduğunda geri sekme efektini devre dışı bırakmak için
overscroll-behavior-y: none
:
body {
/* Disables pull-to-refresh and overscroll glow effect.
Still keeps swipe navigations. */
overscroll-behavior-y: none;
}
Demonun tamamı
Bir araya getirildiğinde,
chatbox demo şunu kullanır:
Özel bir yenilemek için çekme animasyonu oluşturmak için overscroll-behavior
ve kaydırmaların sohbet kutusu widget'ından çıkmasını engeller. Bu sayede,
CSS olmadan ulaşmak zor olan bir kullanıcı deneyimi
overscroll-behavior