Red Section
This section is marked with red color. Notice the scrollbar — it's also red at this position! This helps you visually navigate the page and quickly find the sections you need.
A library to colorize the scrollbar based on element positions. Scroll down and watch the scrollbar on the right — it changes color!
Works in Chrome and Chromium-based browsers (Edge, Opera, Brave). Desktop only.
This section is marked with red color. Notice the scrollbar — it's also red at this position! This helps you visually navigate the page and quickly find the sections you need.
Yellow catches attention. This section works like a bookmark. The library automatically calculates the position and height of each element with the data-scroll-color attribute.
Each color creates its own stop in the scrollbar gradient. When the window or content size changes, the scrollbar automatically updates thanks to ResizeObserver and MutationObserver.
You can use any CSS color: hex, rgb, rgba, hsl, or even named colors like "pink" or "coral". The library simply passes the value to the CSS gradient.
This is the last section. Try resizing the browser window — the scrollbar will update automatically. You can also dynamically add new elements with data-scroll-color.