CSS Scroll Behavior Demo

📌 Elements

💡 Scroll Behavior Fundamentals

CSS Scroll Behavior memungkinkan Anda mengontrol bagaimana scrolling terjadi saat navigasi atau pengguna berinteraksi dengan halaman.

scroll-behavior.css

          
            /* Smooth scrolling for the whole page */

            html {

              scroll-behavior: smooth;

            }

            /* Custom scrollbar */

            ::-webkit-scrollbar {

              width: 12px;

            }

            ::-webkit-scrollbar-thumb {

              background: #9333ea;

              border-radius: 6px;

            }

📝 Penjelasan Detail:

• scroll-behavior - Mengontrol perilaku scrolling (auto/smooth)
• scroll-margin - Menetapkan margin untuk scroll snapping
• scroll-padding - Menetapkan padding untuk scroll snapping
• scroll-snap-type - Menentukan bagaimana scroll snapping berperilaku

🛠️ Features

scroll-snap.css

          
            /* Container with scroll snap */

            .scroll-container {

              scroll-snap-type: y mandatory;

              overflow-y: scroll;

              height: 100vh;

            }

            /* Children elements */

            .scroll-section {

              scroll-snap-align: start;

              height: 100vh;

            }

            /* Custom scroll snap stop */

            .important-section {

              scroll-snap-stop: always;

            }

ℹ️ Browser Support

scroll-behavior: Chrome 61+, Firefox 36+, Safari 15.4+, Edge 79+. Scroll Snap: Chrome 69+, Firefox 68+, Safari 11+, Edge 79+.

📊 Basic Tables

scroll-values.css

          
            /* Scroll Behavior Values */

            html {

              scroll-behavior: auto; /* Default */

            }

            html.smooth {

              scroll-behavior: smooth; /* Smooth scrolling */

            }

            /* Scroll Snap Types */

            .x-scroll {

              scroll-snap-type: x mandatory; /* Horizontal */

            }

            .y-scroll {

              scroll-snap-type: y proximity; /* Vertical */

            }

📝 Penjelasan Detail:

• auto - Scrolling normal tanpa animasi
• smooth - Scrolling dengan animasi halus
• mandatory - Selalu snap ke titik terdekat saat scrolling berhenti
• proximity - Snap hanya jika dekat dengan titik snap
• start/center/end - Posisi alignment untuk scroll-snap-align

🚀 Advanced Table

advanced-scroll.css

          
            /* Custom scrollbar for Firefox */

            html {

              scrollbar-width: thin;

              scrollbar-color: #9333ea transparent;

            }

            /* Scroll snap with margins */

            .section {

              scroll-snap-align: start;

              scroll-margin-top: 80px; /* For fixed header */

            }

            /* Horizontal scroll snap */

            .carousel {

              scroll-snap-type: x mandatory;

              scroll-padding: 0 20px;

            }

ℹ️ Browser Support

Custom scrollbars: Chrome 1+, Firefox 64+, Safari 14+ (with prefixes). Scroll margin/padding: Chrome 69+, Firefox 68+, Safari 11+, Edge 79+.

💡 Pro Tips

🎯 Best Practices

Gunakan scroll behavior untuk meningkatkan UX, tetapi selalu pertimbangkan kompatibilitas browser dan kebutuhan aksesibilitas.

best-practices.css

          
            /* ✅ Good - Smooth scroll with fallback */

            html {

              scroll-behavior: smooth;

            }

            @supports not (scroll-behavior: smooth) {

              html {

                scroll-behavior: auto;

              }

            }

            /* ❌ Avoid - Overusing scroll snap */

            body > * {

              scroll-snap-align: start;

              height: 100vh;

            }

📝 Penjelasan Detail:

• Gunakan progressive enhancement - Selalu sediakan fallback
• Hindari scroll snap berlebihan - Tidak semua konten cocok untuk scroll snap
• Perhatikan aksesibilitas - Pastikan pengguna bisa mengontrol scrolling
• Optimalkan performa - Smooth scrolling bisa mempengaruhi performa pada perangkat low-end