CSS Scroll Snap

Makale İçerik Listesi

Setup

  1. İşleyiş biçimi şu şekilde... parent ve child elementlerde tanımlanması gereken özellikler var.
  2. Öncelikle Parent element'te tanımlamamız gereken 2 özellik var. scroll-snap-type ve scroll-behavior
  3. scroll-snap-type diye bir özellik veriyoruz. Bunun alabileceği değerler
    auto (snapping yok)
    mandatory (snap etmesi zorunlu)
    proximity (eğer yakınındaysa snap etsin yoksa normal scroll etsin)
    y mandatory (snapping sadece y axis'te ve zorunlu)
    x mandatory (snapping sadece x axis'te ve zorunlu)
    y proximity (snapping sadece y axis'te ve yakınsa)
    x proximity (snapping sadece x axis'te ve yakınsa)
    (not: x ve y de de snapping olsun istersem o zaman both diye belirtmem gerekir)
  4. scroll-behavior'da scroll snapping'in nasıl bir hızla olacağını belirtiyor. Değerler smooth veya
  5. Child elementlerinden kastımız aslında direkt child olmak zorunda değil. HTML'de neyi snap objectler olarak belirlemek istiyorsak child tanımlamalarını ona veriyoruz.
  6. Child için tanımlamamız gereken şey öncelikle scroll-snap-align Burada scroll snapping bu elementlerin neresine göre hizalansın onu söylememiz gerekiyor. Değerler start, center, end olabilir.
  7. Child elementlerde ayrıca tanımlayabileceğim bir özellikte scroll-snap-stop Bu sayede çok hızlı scroll yaptığımda ne yapacağını da belirtebilirim.
    - scroll-snap-stop: normal (Hızlı scrolllarda bölüm atlayabilirim ve en son durduğu bölüme snap eder.)
    - scroll-snap-stop: always (Hızlı scroll bile yapsan bölüm atlamaz.)

Fixed Navbar Durumu

  1. Sayfanın üstünde fixed duran bir navbar varsa sadece üstte yazılı olanları yaptığımızda scroll-snapping'in üst kısmı hep navbar'ın altında kalacaktır.
  2. Bu durumu iki şekilde çözebiliriz.
    - Ya parent element'e navbar uzunluğunda scroll-padding-top tanımlayacağız
    - Veya child element'lerin hepsine navbar uzunluğunda scroll-margin-top tanımlayacağız.
  3. Ancak sayfada scrolling başlamadan ilk child yine de navbar'ın altında kalacaktır. Bu yüzden ilk child'a özel olarak bir padding-top vermemiz gerekiyor.

Örnek

Sayfada önizleme

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Snap</title>
    <style>
        html {
            scroll-snap-type: y mandatory;
            scroll-behavior: smooth;
        }
        body {
            margin: 0;
            padding: 0;
        }
        nav {
            position: fixed;
            top: 0;
            z-index: 100;
            width: 100%;
            height: 80px;
            padding: 0;
            padding-left: 20px;
            background-color: #8e05fa;
            color: white;
        }
        section {
            scroll-snap-align: start;
            scroll-snap-stop: always;
            scroll-margin-top: 80px;
        }
        section:nth-child(odd) {
            background-color: red;
        }
    </style>
</head>
<body>
<nav>
    <h1>Scroll-to-Snap Animation</h1>
</nav>
<section style="margin-top: 80px;">
    <ul>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
        <li>Deneme içerik</li>
    </ul>
</section>
<section>
    <ul>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
        <li>Deneme içerik 2</li>
    </ul>
</section>
<section>
    <ul>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
        <li>Deneme içerik 3</li>
    </ul>
</section>
<section>
    <ul>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
        <li>Deneme içerik 4</li>
    </ul>
</section>
</body>
</html>

Kaynaklar

  1. Youtube Video, Scroll Snap - link