Customizable Scrollbar

What this solution does

The 'Custom Scrollbar' module for 1C-Bitrix: Site Management allows customization of the browser scrollbar appearance via the administrative panel without manual editing of templates or CSS files.

After installation, a settings page appears in the administration section. In a multi-site configuration, you can select a specific site. Available parameters include size, colors, border radius, borders, gradients, and the ability to add custom CSS rules.

This solution is suitable for projects requiring a consistent visual interface style, neat scrolling of pages or internal blocks, and the ability to change the design quickly without developer involvement.

Key features:

- Enable or disable the custom scrollbar.

- Adjust the width of the vertical scrollbar and the height of the horizontal scrollbar.

- Configure colors for the thumb, thumb on hover, track, corner, and thumb border.

- Select colors from a palette or enter HEX codes manually.

- Enable gradients individually for each scrollbar element.

- Set two gradient colors and the direction angle.

The module allows flexible customization of scrollbars, including setting corner radius and border thickness, and selecting element resizing modes: disabled, horizontal only, vertical only, or both axes. Internal scrollbar colors can be configured independently. Module operation can be restricted to specific pages by defining inclusion or exclusion lists. It supports multisite installations with options for global settings or individual configuration per domain. The admin interface clearly displays how settings inherit from global values. Ready-made design presets are included: light, dark, and minimalist. A dedicated field is available for custom CSS code.

In Chrome, Edge, and Safari, the module uses the ::-webkit-scrollbar selector, enabling precise pixel dimensions, corner rounding, borders, hover colors, and gradients. Firefox relies on standard CSS properties scrollbar-color and scrollbar-width. Due to browser limitations, gradients, corner rounding, hover colors, and border styling are not supported in Firefox. If a gradient is applied to an element, Firefox displays only the first color from the gradient sequence.

Settings are located in the admin panel under 'Marketing → Custom Scrollbar'.

Module settings are available in the section «Settings → Product Settings → Module Settings → Custom Scrollbar».

General iT can install and configure this module and check how it works on your website.