Documentation
v1.5.1Getting Started
Dynamic island
Visual effects
Animated text
Interaction
Animated
Quisque dignissim est in quam sagittis elementum. Mauris egestas turpis vitae odio efficitur tincidunt. Curabitur sit amet felis condimentum, luctus nisl sit amet, iaculis sem. Vestibulum convallis odio blandit libero imperdiet tempus. Sed blandit elit dolor. Suspendisse aliquam vestibulum lacus, at facilisis massa maximus bibendum. Aliquam erat volutpat. Fusce ultrices sagittis orci. Sed porttitor felis ullamcorper pellentesque interdum. Duis pellentesque sapien arcu, vel tincidunt ante tempus id. Aliquam eu quam scelerisque, commodo metus at, fermentum elit. Suspendisse potenti. Nam aliquet vehicula odio, a sollicitudin nulla scelerisque a. Fusce vitae libero et purus tincidunt placerat sed at velit. Donec mollis ex sed ante mollis venenatis. Curabitur et odio elit. Quisque dignissim est in quam sagittis elementum. Mauris egestas turpis vitae odio efficitur tincidunt. Curabitur sit amet felis condimentum, luctus nisl sit amet, iaculis sem. Vestibulum convallis odio blandit libero imperdiet tempus. Sed blandit elit dolor. Suspendisse aliquam vestibulum lacus, at facilisis massa maximus bibendum. Aliquam erat volutpat. Fusce ultrices sagittis orci. Sed porttitor felis ullamcorper pellentesque interdum. Duis pellentesque sapien arcu, vel tincidunt ante tempus id. Aliquam eu quam scelerisque, commodo metus at, fermentum elit. Suspendisse potenti. Nam aliquet vehicula odio, a sollicitudin nulla scelerisque a. Fusce vitae libero et purus tincidunt placerat sed at velit. Donec mollis ex sed ante mollis venenatis. Curabitur et odio elit.
What is it?
Custom ScrollBar allows you to replace the default browser scrollbar with a customizable and visually appealing version. You can apply gradients, set sizes, and adjust styles for both the scrollbar track and thumb using attributes or presets.
How to set it up?
Wrap your scrollable content inside a 'div' with the attribute data-custom-scrollbar. The custom scrollbar will automatically apply to the content inside the wrapper.
'data-custom-scrollbar'. Defines the container where the custom scrollbar is applied. Options for scrollbar size include:
thin: A smaller, less obtrusive scrollbar.normal: A standard-sized scrollbar.
Default:normal
'data-scrollbar-track-gradient'. Customizes the gradient for the track (External bar). Provide colors as a comma-separated list (e.g., "#f0f0f0,#e0e0e0").
'data-scrollbar-track-angle'. Adjusts the gradient angle for the track (e.g., 45deg, 180deg).
'data-scrollbar-thumb-gradient'. Customizes the gradient for the thumb (Inner bar). Provide colors as a comma-separated list (e.g., "#888888,#666666").
'data-scrollbar-thumb-angle'. Adjusts the gradient angle for the thumb (e.g., 45deg, 180deg).
Note
This custom scrollbar element is ideal for enhancing the scroll experience in independent content areas such as side panels, product listings, tables, and other scrollable sections where a polished, customized appearance is desired.
Support
Need a hand? I'm here to assist with setup, customization, or any questions you may have. Feel free to reach out—I aim to respond as soon as possible, and I appreciate your patience if there's a slight delay.
Contact