Saf CSS Düzgün Kaydırma "Başa dönüş "

"Başa dönüş" bağlantılar bu günlerde pek kullanılmayabilir, ancak tekniğin iyi gösterdiği iki modern CSS özelliği vardır:

  • position: sticky
  • scroll-behavior: smooth

ilk aşık oldum "başa dönüş" bağlantılar – ve ardından jQuery ile nasıl yapılacağını öğrendim – 2011’in en güzel sitelerinden birinde: Web Tasarımcısı Duvarı.

Buradaki fikir, kullanıcıya bir "atlama bağlantısı" web sitesinin en üstüne geri kaydırmak için kullanılır ve genellikle eski bloglarda kullanılırdı.

İşte başarmayı öğreneceklerimiz:

demosu "başa dönüş" bağlantı

Hakkında position: sticky

#

Bu daha yeni konum değeri aşağıdaki şekilde açıklanmıştır: kullanabilirmiyim:

Öğeleri şu şekilde konumlandırır: "sabit" veya "akraba" görünüm alanında nasıl göründüğüne bağlı olarak. Sonuç olarak, eleman "sıkışmak" kaydırma sırasında gerektiğinde.

Caniuse verilerinden diğer önemli not, en iyi destek için onu önek olarak sunmanız gerekeceğidir. Demomuz geri dönecek position: fixed bu da ana hedefe biraz daha az incelikle ulaşacaktır.

Hakkında scroll-behavior: smooth

#

Bu çok yeni bir özellik ve destek nispeten düşük. Bu tam tanım, kaydırma davranışının, özellikle bir bağlantı bağlantısının seçilmesi üzerine, varsayılan, daha sarsıcı anında atlamaya kıyasla sorunsuz bir şekilde canlandırılan bir görünüme sahip olmasını talep eder.

Kullanarak sunar "aşamalı geliştirme" yani tarayıcıları onu destekleyenler için daha iyi bir deneyim olacak, ancak desteklemeyen tarayıcılar için de çalışacak.

Şaşırtıcı bir şekilde, Safari bunu desteklemekte geride kaldı, ancak diğer büyük tarayıcılar bunu yapıyor.

Aşamayı Ayarlayın: Temel içerik HTML

#

İlk olarak, temel bir içerik formatı için bazı anlamsal biçimlendirme ayarlamamız gerekiyor:

<header id="top">Title</header>
<main>
<article>
<!-- long form content here -->
</article>
<!-- Back to Top link -->
<div class="back-to-top-wrapper">
<a href="#top" class="back-to-top-link" aria-label="Scroll to Top">🔝</a>
</div>
</main>

Bağlantımızı sonra yerleştiriyoruz articleama içinde main. Bu, özellikle makalenin bir parçası değildir ve ayrıca odak sırasında en son olmasını istiyoruz.

Biz de ekliyoruz id="top" için <header> ve bu çapayı href başa dön bağlantısı için değer. Yalnızca en üste kaydırmak istediyseniz <main> kimliği taşıyabilir veya sayfanızın üst kısmına yakın bir yerde bulunan mevcut bir kimliğe de ekleyebilirsiniz.

Düzgün kaydırma ekle

#

Hedefimizin ilk kısmı kolay kolay ve aşağıdaki CSS kuralı ile gerçekleştirilir:

/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */
@media screen and (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}

h/t’den @mhlut’a orijinal çözümün hesaba katılmadığını belirttiği için prefers-reduced-motion

Daha önce, bunu yaşadım CSS-Tricks makalesi jQuery ve Vanilla JS ile bunu başarmak için işaretlendi. Makale bir süredir var ve yeni yöntemler mevcut olduğunda böyle makaleleri sürekli olarak güncelledikleri için bu ekibe tebrikler 👍

içeren bir sayfayı ziyaret ettiğinizde olduğu gibi bazı tuhaflıklar buldum. #anchor URL’de, senaryonuz için gerçekten istenmeyebilecek düzgün kaydırmayı gerçekleştirmeye devam eder.

Bültenime katıl makale güncellemeleri, CSS ipuçları ve ön uç kaynaklar için!

#

Çalıştırmadan önce, bağlantıya bazı temel stiller uygulayalım. Eğlenmek için bir emoji kullandım, ancak stil üzerinde daha fazla kontrol için bir SVG simgesiyle değiştirebilirsiniz.

.back-to-top-link {
display: inline-block;
text-decoration: none;
font-size: 2rem;
line-height: 3rem;
text-align: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: #d6e3f0;
/* emoji don't behave like regular fonts
so this helped position it correctly */

padding: 0.25rem;
}

Bu bize çok basit bir yuvarlak düğme verir. Tam Codepen’de, ek olarak ekledim "tatlı" stiller ve :hover ve :focus stil, ama bunlar gerekli değil.

Ardından, bu bağlantı için neden bir sarmalayıcı eklediğimizi merak edebilirsiniz. Bunun nedeni, temelde bir oluşturmak için kullanmamız gerektiğidir. "kaydırma izi" bağlantının içinde yaşaması için.

Yol position: sticky tasarlanmıştır, öğeyi DOM’da bulunduğu yerden alır. O zaman saygı duyar "tepe" görünüm alanına göre yerleştirmek için değer. Ancak, bağlantıyı belgenin sonuna yerleştirdik, bu nedenle yardım almadan asla alınmayacak.

Sarmalayıcıyı birlikte kullanacağız position: absolute bağlantının konumunu görsel olarak sayfada daha yukarıya değiştirmek için. Neyse ki, tarayıcı bu görsel olarak ayarlanmış konumu – yani görünüm alanına girdiğinde – ne zaman yapılacağını hesaplamak için kullanır. "sopa" Bağlantı.

Yani, sarmalayıcı stillerimiz şöyle görünür:

/* How far of a scroll travel within <main> prior to the
link appearing */

$scrollLength: 100vh;

.back-to-top-wrapper {
// uncomment to visualize "track"
// outline: 1px solid red;
position: absolute;
top: $scrollLength;
right: 0.25rem;
// Optional, extends the final link into the
// footer at the bottom of the page
// Set to `0` to stop at the end of `main`
bottom: -5em;
// Required for best support in browsers not supporting `sticky`
width: 3em;
// Disable interaction with this element
pointer-events: none;
}

Son tanım sizin için de yeni olabilir: pointer-events: none. Bu, temelde tıklamalar gibi etkileşim olaylarına izin verir. "suya düşmek" bu öğe, belgenin geri kalanını engellememesi için. Örneğin, bu sarmalayıcının içerikteki bağlantıları yanlışlıkla engellemesini istemeyiz.

Bunu yerine getirdiğimizde, şimdi bağlantının içerikle örtüştüğünü, ilk görünüm alanı içeriğinin biraz altında görüyoruz. Biraz stil ekleyelim <main> bu örtüşmeyi önlemek ve ayrıca eklemek için position: relative mutlak bağlantı sarmalayıcı verilen en iyi sonuçlar için gerekli olan:

main {
// leave room for the "scroll track"
padding: 0 3rem;
// required to make sure the `absolute` positioning of
// the anchor wrapper is indeed `relative` to this element vs. the body
position: relative;
max-width: 50rem;
margin: 2rem auto;

// Optional, clears margin if last element is a block item
*:last-child {
margin-bottom: 0;
}
}

Geriye kalan tek şey, konumlandırmanın tam olarak çalışması için gerekli stilleri eklemek üzere bağlantıyı tekrar ziyaret etmektir:

.back-to-top-link {
// `fixed` is fallback when `sticky` not supported
position: fixed;
// preferred positioning, requires prefixing for most support, and not supported on Safari
// @link https://caniuse.com/#search=position%3A%20sticky
position: sticky;

// reinstate clicks
pointer-events: all;
// achieves desired positioning within the viewport
// relative to the top of the viewport once `sticky` takes over, or always if `fixed` fallback is used
top: calc(100vh - 5rem);

// ... styles written earlier
}

bu fixed geri dönüş, desteklemeyen tarayıcıların sticky konumlandırma her zaman bağlantıyı gösterecektir. Ne zaman sticky desteklenirse, tam olarak istenen etki gerçekleşir, bu da bağlantının görüntülenmemesidir. $scrollLength geçirilir. İle birlikte sticky konumu, sarmalayıcının üst kısmı görünüm alanında olduğunda, bağlantı "sıkışmak" ve kullanıcı ile birlikte kayar.

Ayrıca eski durumuna getirdiğimize dikkat edin pointer-events ile all değer, böylece bağlantıyla etkileşim gerçekten çalışır.

Ve işte nihai sonuç – en iyi sonuçlar için Safari dışında görüntüleyin.

Stephanie Eckles (@5t3ph)

Bilinen Sorunlar

#

Kısa biçimli içeriğiniz varsa, bu daha kısa bir cihaz görünümünde çok zarif bir şekilde başarısız olmaz. – benim yaptığım gibi – kullanmayı düşünebilirsiniz. overflow: hidden. Ama bu ne yazık ki engelliyor position: sticky tamamen çalışmaktan ☹️ Yani bir "gerçek dünya" senaryoda, bu davranışı makale başına değiştirme seçeneği sunmanız veya bir makalenin şablona enjekte etmeden önce bir uzunluk gereksinimini karşılayıp karşılamadığını belirlemek için bir hesaplama yapmanız gerekebilir.

Bildiğiniz veya başka bir şey bulursanız yorum bırakın "yakaladım" bu yöntemlerle!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.