Belajar Tailwind CSS Lanjutan #189 Scroll-padding di Tailwind CSS
Ahmad Dika Zulfahmi
28 Mei 2025
Apa itu scroll-padding?
scroll-padding adalah jarak (padding) yang ditambahkan di dalam sebuah kontainer scroll (biasanya pakai fitur scroll-snap), supaya elemen yang discroll berhenti dengan posisi yang lebih nyaman, tidak terlalu mepet ke tepi kontainer.
Bayangkan seperti padding biasa, tapi khusus untuk mengatur posisi berhenti scroll.
Penjelasan kelas-kelas scroll-padding:
scroll-p-<number>
Mengatur scroll padding di semua sisi (atas, kanan, bawah, kiri).
Contoh: scroll-p-6 artinya scroll-padding 6 unit spacing Tailwind.
-scroll-p-<number>
Sama seperti di atas, tapi nilainya negatif.
scroll-px-<number>
Scroll padding hanya di kiri dan kanan (horizontal).
scroll-py-<number>
Scroll padding hanya di atas dan bawah (vertikal).
scroll-pt-, scroll-pr-, scroll-pb-, scroll-pl-<number>
Scroll padding spesifik sisi:
scroll-pt = padding atas
scroll-pr = kanan
scroll-pb = bawah
scroll-pl = kiri
Contoh:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Contoh scroll-pl-6 + snap-x</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="overflow-x-scroll snap-x scroll-pl-6 flex space-x-4 p-4 h-48">
<div class="snap-start flex-shrink-0 w-48 h-full bg-blue-500 text-white flex items-center justify-center rounded">
Item 1
</div>
<div class="snap-start flex-shrink-0 w-48 h-full bg-green-500 text-white flex items-center justify-center rounded">
Item 2
</div>
<div class="snap-start flex-shrink-0 w-48 h-full bg-red-500 text-white flex items-center justify-center rounded">
Item 3
</div>
</div>
</body>
</html>
Artinya: ketika discroll, elemen pertama akan berhenti dengan jarak 6 unit dari sisi kiri kontainer
berikut hasilnya:
Gunakan arah teks (logical properties):
scroll-ps-<number> → padding awal (start) sesuai arah baca (LTR = kiri, RTL = kanan)
scroll-pe-<number> → padding akhir (end)
Ini berguna kalau websitemu mendukung bahasa RTL seperti Arab.
Contoh:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scroll-ps-6 dengan LTR & RTL</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="space-y-10 p-6">
<!-- LTR (Left to Right) -->
<div>
<h2 class="font-bold mb-2">LTR (Left-to-Right)</h2>
<div dir="ltr" class="overflow-x-scroll snap-x scroll-ps-6 flex space-x-4 h-40 bg-gray-100 rounded">
<div class="snap-start flex-shrink-0 w-40 bg-blue-500 text-white flex items-center justify-center rounded">Item 1
</div>
<div class="snap-start flex-shrink-0 w-40 bg-green-500 text-white flex items-center justify-center rounded">Item 2
</div>
<div class="snap-start flex-shrink-0 w-40 bg-red-500 text-white flex items-center justify-center rounded">Item 3
</div>
</div>
</div>
<!-- RTL (Right to Left) -->
<div>
<h2 class="font-bold mb-2">RTL (Right-to-Left)</h2>
<div dir="rtl" class="overflow-x-scroll snap-x scroll-ps-6 flex space-x-4 h-40 bg-gray-100 rounded">
<div class="snap-start flex-shrink-0 w-40 bg-blue-500 text-white flex items-center justify-center rounded">Item 1
</div>
<div class="snap-start flex-shrink-0 w-40 bg-green-500 text-white flex items-center justify-center rounded">Item 2
</div>
<div class="snap-start flex-shrink-0 w-40 bg-red-500 text-white flex items-center justify-center rounded">Item 3
</div>
</div>
</div>
</body>
</html>
berikut hasilnya:
Menggunakan nilai negatif:
Kalau mau nilai scroll padding-nya negatif (jarak scroll lebih mepet), pakai tanda minus di depan kelas:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contoh -scroll-ps-6 + snap-x</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<div class="-scroll-ps-6 snap-x overflow-x-scroll flex space-x-4 h-40 bg-gray-100 rounded">
<div class="snap-start flex-shrink-0 w-40 h-full bg-blue-600 text-white flex items-center justify-center rounded">
Item 1
</div>
<div class="snap-start flex-shrink-0 w-40 h-full bg-green-600 text-white flex items-center justify-center rounded">
Item 2
</div>
<div class="snap-start flex-shrink-0 w-40 h-full bg-red-600 text-white flex items-center justify-center rounded">
Item 3
</div>
<div class="snap-start flex-shrink-0 w-40 h-full bg-yellow-600 text-white flex items-center justify-center rounded">
Item 4
</div>
</div>
</body>
</html>
berikut hasilnya:
Artikel Lainnya Dengan Kategori Terkait :
1. Belajar Javascript #01 Belajar Menyisipkan Javascript Pada HTML menggunakan Metode Internal
2. Belajar Javascript #02 Belajar Menyisipkan Javascript Pada HTML Menggunakan Metode External
3. Belajar Javascript #03 Mendeklarasikan Variabel
4. Belajar Javascript #05 Menampilkan data di console
5. Belajar Javascript #06 Operator Aritmatika
6. Belajar Javascript #07 Assignment Operator
7. Belajar Javascript #08 String Operator
8. Belajar Javascript #09 Operator Perbandingan
9. Belajar Javascript #10 Operator Logika AND, OR, NOT, pada JavaScript
10. Belajar Javascript #11 Belajar Fungsi Pada Javascript
11. Belajar Javascript #12 Cara Mendeklarasikan Fungsi Pada Javascript
12. Belajar Javascript #13 Belajar Parameter & Argument Pada Javascript
13. Belajar Javascript #14 Belajar apa itu Function Hoisting pada javascript, dan contohnya
14. Belajar Javascript #15 Lingkup Global vs Lingkup Lokal
15. Belajar Javascript #16 Mengenal Objek Javascript
16. Belajar Javascript #17 Menggunakan Object Literal
17. Belajar Javascript #18 Mengakses properti Objek
18. Belajar Javascript #19 Menambah Properti Baru pada Objek
19. Belajar Javascript #20 Menghapus Properti Objek
20. Belajar Javascript #21 Object Method
21. Belajar Javascript Intermediate #02 ForEach
22. Belajar Javascript Intermediate #03 Map
23. Belajar Javascript Intermediate #06 Index Of
24. Belajar PHP #2 Cara Menginstall XAMPP di Windows
25. Belajar Tailwind CSS Lanjutan #189 Scroll-padding di Tailwind CSS
26. Belajar Typescript #04 | Membuat code dan menjalankan Typescript
27. Cara Install Laravel di Windows
28. Cara Menginstall Sublime Text
29. Cara Menginstall Visual Studio Code
30. Daftar Urutan Web Browser Terbaik, Cari Tau Yang Paling Cocok Buat Kamu!
31. Gampang Banget ! Begini Cara Membuat Sticker Wa
