Scrollbar Style Customizer

WHAT IT DOES

Scrollbar Style Customizer gives you full control over how scrollbars look on any webpage. A panel overlay provides controls for scrollbar width (thin, normal, or thick), thumb color, track color, corner color, and border radius—allowing you to match scrollbars to your visual preferences or improve visibility. Five preset themes (Light, Dark, Minimal, Colorful, and Vintage) provide instant styling with a single click. Changes apply in real-time as you adjust settings, and preferences are saved per-site so you can have different scrollbar styles for different websites. The script uses both WebKit scrollbar pseudo-elements (-webkit-scrollbar) and the newer CSS scrollbar-color and scrollbar-width properties for cross-browser compatibility across Chrome, Firefox, Edge, and other modern browsers.

WHERE IT RUNS

This script runs on any webpage, injecting CSS to override scrollbar styles. It operates entirely within your browser tab, adding a style element to the page's head. The script cannot access other tabs, your browsing history, bookmarks, downloads, or any data outside the current page. All settings—including scrollbar width, colors, border radius, preset theme, per-site override, and auto-apply preference—are stored locally using GM_setValue and never transmitted anywhere.

HOW TO USE

After installing with the BotGentz extension, the script automatically applies your default scrollbar settings to every page you visit (if auto-apply is enabled). Use the preset dropdown to instantly apply a themed style—Light, Dark, Minimal, Colorful, or Vintage. For custom styling, select "Custom" from the presets and adjust individual controls: choose scrollbar width (thin, normal, thick), set thumb color (the draggable part), track color (the background), and corner color. Adjust border radius for rounded or square scrollbar corners. The page updates instantly as you make changes. Enable "Per-site Override" to save different scrollbar styles for different domains. Click "Copy CSS" to export your current settings as CSS for use in your own stylesheets.

THE REAL MECHANISM

The script injects a style element containing CSS rules that target scrollbar pseudo-elements and properties. For WebKit browsers (Chrome, Edge, Safari), it uses ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, and ::-webkit-scrollbar-corner to style each component. The thumb width is controlled by the scrollbar width property on ::-webkit-scrollbar. For Firefox, the script uses the standard scrollbar-width and scrollbar-color properties applied to the universal selector. The scrollbar-width property accepts 'thin', 'auto', or 'none' values, which map directly to the user's width selection. The scrollbar-color property accepts two color values: the first for the thumb, the second for the track. The border-radius is applied to both the track and thumb, creating rounded corners. All CSS rules use the !important flag to override any existing page scrollbar styles. The preset system stores complete configuration objects and applies them by setting all individual values at once. Real-time updates are achieved by replacing the style element's text content on each change.

THE PANEL

The Scrollbar Customizer panel is a BGPanel component that you can drag anywhere on your screen by its header. It snaps to the nearest edge when released, keeping your workspace organized. The panel collapses to a small bubble showing only the emoji icon when minimised—click to expand it again. You can resize the panel horizontally to see more of the controls. Press the Escape key to collapse the panel instantly. Your panel position and size are saved per-site.

PLEASE NOTE

This script requires the free BotGentz browser extension to function. Scrollbar styling is supported in most modern browsers, but some older browsers or niche browsers may not support all CSS scrollbar properties. Firefox uses the newer standard properties (scrollbar-width, scrollbar-color) while WebKit browsers use pseudo-elements; the script includes both for maximum compatibility. The scrollbar styles apply to the entire page and may not affect scrollbars inside iframes or shadow DOM elements. The script uses the !important flag to override page styles, which may cause conflicts with other scrollbar-related CSS. The script never reads or writes password fields, hidden inputs, or file inputs. It stores only your scrollbar width, thumb color, track color, corner color, border radius, preset theme, per-site override preference, and auto-apply preference locally. No page content, styling data, or personal information is ever collected, transmitted, or shared.