ScrollIntoView tüm tarayıcılarda çalışıyor mu?

Yanıtlar:

82

Evet destekleniyor, ancak kullanıcı deneyimi ... kötü.

@ 9bits'in belirttiği gibi, bu uzun süredir tüm büyük tarayıcılar tarafından destekleniyor . Bunun için endişelenme. Asıl sorun, işleyiş şeklidir. Sadece sayfanın sonunda olabilecek belirli bir öğeye atlar. Atlayarak, kullanıcılar şu konularda hiçbir fikre sahip olmaz:

  • sayfa yukarı kaydırıldı
  • sayfa aşağı kaydırıldı
  • başka yere yönlendirildiler

İlk ikisi kaydırma konumuna göre belirlenebilir, ancak kullanıcıların atlama yapılmadan önce kaydırma konumunu takip ettiğini kim söylüyor? Yani bu kesin olmayan bir eylem.

Sonuncusu, özellikle sayfanın görünümün dışına kaydırılan hareketli bir başlığına sahipse ve kalan sayfa tasarımı aynı sayfada olma konusunda hiçbir şey ifade etmiyorsa (ayrıca sol menü gibi herhangi bir toplam yükseklik dikey öğesi yoksa doğru olabilir) bar). Bu problemin kaç sayfada olduğuna şaşıracaksınız. sadece kendiniz kontrol edin. Bir sayfaya gidin, yukarıdan bakın, ardından tuşuna basın Endve tekrar bakın. Muhtemelen farklı bir sayfa olduğunu düşüneceksiniz.

scrollintoviewKurtarma için animasyonlu jQuery eklentisi

Bu nedenle , yerel DOM işlevini kullanmak yerine görünüme kaydırma yapan eklentiler vardır . Genellikle yukarıda özetlenen 3 sorunu da ortadan kaldıran kaydırmayı canlandırırlar. Kullanıcılar hareketi kolayca takip edebilir.

— Robert Koritnik
kaynak
1
Not: jQuery eklentisi, kaydırılan öğe bir iframe içindeyse (açık nedenlerden dolayı) çalışmaz (sağda). element.scrollIntoView o zaman bile çalışıyor.
— panzi
7
ile yeni spesifikasyon ScrollIntoViewOptionsbelirtmeye izin verir behavior: 'smooth'. maalesef bu seçeneğin bir tarayıcıda desteklenip desteklenmediğini kolayca tespit etmenin bir yolu yok…
— uçan koyun
6
Firefox behavior: "smooth", Chrome veya Safari'yi destekliyor , ancak desteklemiyor gibi görünüyor .
— Flimm
1
Ok tuşlarının yukarı / aşağı kontrol ettiği ve seçili öğeye bağlı olarak menünün kaydırıldığı özel bir açılır menü oluşturmak gibi şeyler için kullanışlıdır. Bu durumda, eşyalar arasında anında sıçramamak kötü bir kullanıcı deneyimi olur.
— user2867288
1
@ IE / Edge'de hiçbiri. Referans bakın , sadece FF36 + bu özelliğe sahiptir. Bu nedenle, ne yazık ki işe yaramaz.
— Alex Zhukovskiy
3

Matteo Spinnelli'nin iScroll- 4'ünü kullanıyorum ve iOS safaride de çalışıyor. ScrollTo, scrollToElement ve scrollToPage olmak üzere üç yöntemi vardır. Diyelim ki bir div içine sarılmış sırasız bir eleman listeniz var. Robert Koritnik'in yukarıda yazdığı gibi, kaydırdığınızı göstermek için o küçük animasyona ihtiyacınız var. Aşağıdaki yöntem bu etkiye ulaşır.

scrollToElement(element, time);
— Thandasoru
kaynak
2
iScroll-4 bağlantınız kesildi
— Romain Vincent
2

JQuery alternatifini ve animasyonunu <html>ve <body>öğelerini kullanabilirsiniz:

$('html, body').animate({
  scrollTop: $("#myElem").offset().top
}, 1000);
— S1awek
kaynak
1

Bunu denemedim, ancak yerleşik scrollIntoView işlevine bindirme işlemi çok fazla kod tasarrufu sağlayacak gibi görünüyor. Animasyonlu aksiyon istiyorsanız yapacağım şey şu:

  1. Kabın mevcut kaydırma konumunu BAŞLANGIÇ KONUMU olarak önbelleğe al
  2. yerleşik scrollIntoView'da çalıştır
  3. Son konum olarak kaydırma konumunu yeniden önbelleğe al
  4. Konteyneri BAŞLANGIÇ KONUMU'na geri döndürün
  5. SON KONUMA kaydırmayı canlandırın
— Lex
kaynak
1

scrollIntoViewIfNeeded hakkında lütfen okuyun 

if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}
— zloctb
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.