0
# Base Scrollbar Utilities
1

2
Fundamental scrollbar control utilities that enable, modify, or hide scrollbars entirely.
3

4
## Capabilities
5

6
### Scrollbar Utility
7

8
Enables custom scrollbar styling with default 16px size.
9

10
```css { .api }
11
/**
12
 * Enables custom scrollbar with default sizing and color variable support
13
 * - Sets scrollbar-width to auto (allows custom sizing)
14
 * - Uses CSS custom properties for colors
15
 * - Enables WebKit scrollbar pseudoelements
16
 * - Default size: 16px width and height
17
 */
18
.scrollbar {
19
  scrollbar-width: auto;
20
  scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
21
  
22
  &::-webkit-scrollbar {
23
    display: block;
24
    width: var(--scrollbar-width, 16px);
25
    height: var(--scrollbar-height, 16px);
26
  }
27
  
28
  &::-webkit-scrollbar-track {
29
    background-color: var(--scrollbar-track);
30
    border-radius: var(--scrollbar-track-radius);
31
  }
32
  
33
  &::-webkit-scrollbar-thumb {
34
    background-color: var(--scrollbar-thumb);
35
    border-radius: var(--scrollbar-thumb-radius);
36
  }
37
  
38
  &::-webkit-scrollbar-corner {
39
    background-color: var(--scrollbar-corner);
40
    border-radius: var(--scrollbar-corner-radius);
41
  }
42
}
43
```
44

45
**Usage Example:**
46
```html
47
<!-- Basic scrollbar -->
48
<div class="scrollbar overflow-auto h-64 w-64">
49
  <div class="h-96 w-96">
50
    Content that overflows both horizontally and vertically
51
  </div>
52
</div>
53

54
<!-- Scrollbar with colors -->
55
<div class="scrollbar scrollbar-track-gray-100 scrollbar-thumb-blue-500 overflow-auto h-64">
56
  <div class="h-96">Tall content</div>
57
</div>
58
```
59

60
### Scrollbar Thin Utility
61

62
Enables thin scrollbar styling with 8px size.
63

64
```css { .api }
65
/**
66
 * Enables thin scrollbar with fixed 8px sizing
67
 * - Sets scrollbar-width to thin (browser default thin size)
68
 * - Uses CSS custom properties for colors
69
 * - Fixed 8px size for WebKit browsers
70
 */
71
.scrollbar-thin {
72
  scrollbar-width: thin;
73
  scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
74
  
75
  &::-webkit-scrollbar {
76
    display: block;
77
    width: 8px;
78
    height: 8px;
79
  }
80
  
81
  &::-webkit-scrollbar-track {
82
    background-color: var(--scrollbar-track);
83
    border-radius: var(--scrollbar-track-radius);
84
  }
85
  
86
  &::-webkit-scrollbar-thumb {
87
    background-color: var(--scrollbar-thumb);
88
    border-radius: var(--scrollbar-thumb-radius);
89
  }
90
  
91
  &::-webkit-scrollbar-corner {
92
    background-color: var(--scrollbar-corner);
93
    border-radius: var(--scrollbar-corner-radius);
94
  }
95
}
96
```
97

98
**Usage Example:**
99
```html
100
<!-- Thin scrollbar -->
101
<div class="scrollbar-thin overflow-auto h-64">
102
  <div class="h-96">Content with thin scrollbar</div>
103
</div>
104

105
<!-- Thin scrollbar with colors -->
106
<div class="scrollbar-thin scrollbar-thumb-green-400 scrollbar-track-green-100 overflow-auto h-64">
107
  <div class="h-96">Content with styled thin scrollbar</div>
108
</div>
109
```
110

111
### Scrollbar None Utility
112

113
Completely hides scrollbars while maintaining scroll functionality.
114

115
```css { .api }
116
/**
117
 * Hides scrollbar completely while preserving scroll functionality
118
 * - Sets scrollbar-width to none (hides in Firefox/standards browsers)
119
 * - Hides WebKit scrollbar with display: none
120
 */
121
.scrollbar-none {
122
  scrollbar-width: none;
123
  
124
  &::-webkit-scrollbar {
125
    display: none;
126
  }
127
}
128
```
129

130
**Usage Example:**
131
```html
132
<!-- Hidden scrollbar but still scrollable -->
133
<div class="scrollbar-none overflow-auto h-64">
134
  <div class="h-96">
135
    Content is scrollable but scrollbar is invisible
136
  </div>
137
</div>
138

139
<!-- Custom scroll indicators -->
140
<div class="scrollbar-none overflow-auto h-64 relative">
141
  <div class="h-96">Content</div>
142
  <!-- Custom scroll indicator can be added with JavaScript -->
143
</div>
144
```
145

146
### Browser Compatibility
147

148
Each utility handles browser differences automatically:
149

150
#### Standard Strategy (default)
151
```css
152
.scrollbar {
153
  /* Modern browsers (Firefox/Chromium) */
154
  scrollbar-width: auto;
155
  scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
156
  
157
  /* WebKit browsers (Safari/older Chrome) */
158
  &::-webkit-scrollbar { /* WebKit rules */ }
159
}
160
```
161

162
#### Pseudoelements Strategy
163
```css
164
.scrollbar {
165
  /* Firefox-only modern properties */
166
  @supports (-moz-appearance:none) {
167
    scrollbar-width: auto;
168
    scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
169
  }
170
  
171
  /* WebKit browsers (all other browsers) */
172
  &::-webkit-scrollbar { /* WebKit rules */ }
173
}
174
```
175

176
### CSS Custom Properties
177

178
Base utilities use CSS custom properties for theming:
179

180
```css { .api }
181
/* Color properties */
182
--scrollbar-track: /* Track background color */
183
--scrollbar-thumb: /* Thumb background color */
184
--scrollbar-corner: /* Corner background color */
185

186
/* Border radius properties */
187
--scrollbar-track-radius: /* Track border radius */
188
--scrollbar-thumb-radius: /* Thumb border radius */
189
--scrollbar-corner-radius: /* Corner border radius */
190

191
/* Size properties (scrollbar utility only) */
192
--scrollbar-width: /* Horizontal scrollbar width */
193
--scrollbar-height: /* Vertical scrollbar height */
194
```
195

196
These properties are set by color, size, and rounded utilities and consumed by the base utilities.
197

198
### Usage Patterns
199

200
#### Basic Scrollable Container
201
```html
202
<div class="scrollbar overflow-auto max-h-screen">
203
  <div class="space-y-4">
204
    <!-- Long content -->
205
  </div>
206
</div>
207
```
208

209
#### Styled Chat Messages
210
```html
211
<div class="scrollbar-thin scrollbar-track-gray-100 scrollbar-thumb-gray-300 overflow-y-auto h-96 p-4">
212
  <div class="space-y-2">
213
    <!-- Chat messages -->
214
  </div>
215
</div>
216
```
217

218
#### Code Editor Style
219
```html
220
<pre class="scrollbar scrollbar-track-gray-800 scrollbar-thumb-gray-600 overflow-auto bg-gray-900 text-white p-4">
221
  <code>
222
    // Code content
223
  </code>
224
</pre>
225
```
226

227
#### Hidden Scrollbar with Custom Controls
228
```html
229
<div class="relative">
230
  <div class="scrollbar-none overflow-auto h-64" id="content">
231
    <div class="h-96">Content</div>
232
  </div>
233
  <!-- Custom scroll buttons -->
234
  <button class="absolute top-0 right-0" onclick="scrollUp()">↑</button>
235
  <button class="absolute bottom-0 right-0" onclick="scrollDown()">↓</button>
236
</div>
237
```