Generator Tata Letak Geser CSS Buat tata letak geser CSS untuk pengguliran horizontal dan vertikal dengan penyelarasan geser.

🎨

Generator Tata Letak Geser CSS

Buat tata letak geser CSS untuk pengguliran horizontal dan vertikal dengan penyelarasan geser.

Pilih Arah Gulir

Pilih gulir horizontal atau vertikal untuk wadah snap Anda.

Konfigurasi Perilaku Snap

Atur jenis snap (wajib atau kedekatan) dan perataan snap (awal, tengah, akhir).

Salin CSS

Gulir pratinjau untuk melihat perilaku snap dan salin CSS wadah dan item.

Loading tool...

What Is Generator Tata Letak Geser CSS?

Generator CSS Scroll Snap membuat tata letak gulir-snap untuk membangun pengalaman seperti karusel dengan CSS murni. Gulir-snap menyediakan pengalaman menggulir yang mulus dan asli di mana konten bergeser ke posisi yang ditentukan. Alat ini mendukung kedua arah gulir horizontal dan vertikal, dengan kontrol untuk jenis snap (wajib untuk snapping ketat, proximity untuk snapping fleksibel) dan perataan snap (awal, tengah, atau akhir). Anda dapat menyesuaikan jarak antara item dan jumlah item gulir. Pratinjau sepenuhnya interaktif-gulir melalui item untuk melihat perilaku snap dalam aksi. CSS yang dihasilkan termasuk properti scroll-snap-type wadah dan properti scroll-snap-align item, memberi Anda kode lengkap untuk mengimplementasikan gulir-snap.

Why Use Generator Tata Letak Geser CSS?

Dukungan gulir snap horizontal dan vertikal
Opsi jenis snap wajib dan kedekatan
Pratinjau interaktif dengan demonstrasi gulir nyata
Solusi murni CSS tanpa memerlukan JavaScript

Common Use Cases

Karussel Gambar

Buat karussel gambar yang terasa asli tanpa perpustakaan JavaScript.

Galeri Produk

Buat galeri produk dengan snap untuk situs e-commerce.

Gulir Halaman Penuh

Terapkan gulir vertikal halaman penuh.

Umpan Cerita/Kartu

Buat umpan kartu horizontal yang ramah dengan snap gulir.

Technical Guide

CSS Scroll Snap menggunakan dua properti utama: scroll-snap-type pada wadah dan scroll-snap-align pada item. scroll-snap-type mengambil sumbu (x, y, atau keduanya) dan nilai ketat (wajib atau proximity). Wajib memaksa posisi gulir untuk bergeser ke titik snap, sedangkan proximity hanya bergeser saat dekat dengan titik snap. scroll-snap-align pada item menentukan di mana item bergeser: awal meratakan ke awal wadah, tengah ke tengah, dan akhir ke akhir wadah. Properti tambahan termasuk scroll-padding pada wadah untuk offset posisi snap, dan scroll-margin pada item untuk offset snap individual. Agar snap berfungsi, wadah memerlukan overflow: auto atau overflow: scroll dan dimensi yang ditentukan. Perilaku gulir sangat mulus dan menggunakan pengguliran browser asli, menyediakan kinerja yang luar biasa. Browser modern sepenuhnya mendukung snap-gulir tanpa awalan vendor.

Tips & Best Practices

1
Gunakan jenis snap wajib untuk perilaku karussel yang ketat
2
Tambahkan scroll-padding untuk menggeser posisi snap dari tepi wadah
3
Atur overscroll-behavior: contain untuk mencegah gulir halaman saat mencapai ujung
4
Gunakan flex-shrink: 0 pada item untuk mencegahnya menyusut

Related Tools

Pembuat Transisi CSS

Buat transisi CSS dengan properti, durasi, easing, dan efek hover yang dapat disesuaikan.

🎨 CSS & Design

Tanah Main CSS Flexbox

Penggalang CSS Flexbox visual dengan kontrol interaktif untuk semua properti wadah fleksibel.

🎨 CSS & Design

Papan Kerja CSS Grid

Pembangun CSS Grid visual dengan kontrol interaktif untuk kolom templat, baris, dan celah.

🎨 CSS & Design

Pengujian Desain Responsif

Pratinjau situs web pada titik breakpoint perangkat yang umum dengan viewer iframe bawaan.

🎨 CSS & Design

Frequently Asked Questions

Q Apa perbedaan antara wajib dan kedekatan?

Wajib selalu menggeser ke titik terdekat. Kedekatan hanya menggeser saat posisi gulir dekat dengan titik snap.

Q Apakah gulir snap bekerja di perangkat mobile?

Ya, CSS scroll snap bekerja sangat baik di perangkat mobile dengan sentuhan asli dan momentum.

Q Bisakah saya menggunakan gulir snap dengan CSS Grid?

Ya, gulir snap bekerja dengan metode tata letak apa pun termasuk Grid dan Flexbox.

Q Bagaimana cara menambahkan gulir halus?

Tambahkan scroll-behavior: smooth ke wadah untuk menganimasikan gulir antara titik snap.

Q Apakah gulir snap didukung di semua peramban?

Ya, CSS Scroll Snap didukung di semua peramban modern tanpa awalan vendor.

About This Tool

Generator Tata Letak Geser CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.