Sabit gezinme/üstbilgi ve klavye kaydırma

Question

Sayfanın üst kısmında sabit konumlara sahip öğeler varsa, klavyeyi kullanarak kaydırma yapmak (PgUp/PgDown, Space) bazen zor olur. gezinme çubukları: görünümün alt kısmında görünmeyen içerik, kaydırdıktan sonra sabit öğeler tarafından gizlenmiş olabilir.

Bu sorun nasıl çözülür? Tarayıcılar hesaplar, ne kadar kaydırmalılar? Farklı tarayıcılarda ve aynı tarayıcılarda farklı sayfalarda farklı davranışlar gözlemledim (örneğin, Firefox, http://www.sueddeutsche.de/'da yaklaşık 80px eski içerik bırakıyor, ancak http://www.taz.de üzerinde daha az. Chromium çok daha fazla içerik bırakıyor.).

Bu bir sorun mu var, yani bir web sayfasını kaydırmak için klavyeyi kullandığımda kimse var mı? Herhangi bir istatistik biliyor musunuz?

Sorunu göstermek için, bir Fiddle oluşturdum: https://jsfiddle.net/x7hj8c4m/ İçeriği Firefox'taki Space kullanarak kaydırmayı deneyin. Sabit öğe, kaydırmadan önce henüz görünmeyen metni kapsayacaktır. left: 0 eklerseniz, çalışır.

Answer 1

Klavyeyle kaydırma yapmak, DOM ile büyük olasılıkla (çok fazla) etkileşimde bulunmayan, dolayısıyla sabit öğelerin hesabını hesaba katmak için çok fazla beklenen oldukça basit bir davranıştır. Tarayıcıya özgü önceden tanımlanmış artışlar var gibi görünüyor (veya özelleştirilebileceği konusunda hiçbir fikrim yok), ancak yukarı/aşağı ok tuşlarını kullandığınızda artışların genellikle daha küçük (muhtemelen yeterince küçük) olduğunu unutmayın.

Answer 2

Çok ilginç gözlem.

İlk olarak,PGDN basmakla eşdeğerdir alanı basıldığında. Ve PgDn düğmesine basıldığında, sayfa dikey olarak "bir sayfanın px değeri" kadar dikey olarak kaydırılmalıdır. OP'nin kulağı tarafından gösterildiği gibi, özellikle Firefox, sabit bir başlık algılayıp algılamadığına bağlı olarak bu değeri farklı şekilde hesaplar.

• bir position: fixed elemanı olmadan, Chrome ve IE ~ 87,5% belge yüksekliğinin tarafından aşağı kaydırma;: IE, Chrome, Firefox üzerinde kendi testlerden

  , bunu sonucuna Firefox belge yüksekliği aşağı kaydırır - scrollbar yüksekliği - ~ 20px. Ekranın üst solunda bir position: fixed; width: 100% elemanı ile

• Firefox akıllıca eleman algısal belge yüksekliğini azaltır anlar ve böylece geçerlidir: Doküman yüksekliği - kaydırma çubuğu yüksekliği - Sabit eleman yüksekliği - ~ 20px. Durumun oldukça spesifik olduğu görülmektedir: elemanın çalışması için belgenin tam modelinin tam solunda tam genişliğe tam olarak sabitlenmesi gerekir. Diğer tarayıcılar (Chrome, IE) bu tür bir telafi yapmaz ve standart 87.5% kaydırma işlemini gerçekleştirir.

bu alakalı olup olmadığını bilmiyorum, ama bu kudretiposition: sticky desteği ile ilgili bir şey var.