Beautiful scrollbar for WordPress with Scroller plugin

The Scroller is a beautiful scrollbar for WordPress website, any element on, or a whole WordPress page. The Scroller is explicitly designed to customize the scrollbar on your WordPress site. This WordPress plugin turns an ordinary annoying browser scrollbar into a lovely stylized scrolling control.

Notes

The Scroller may not be compatible with other scroll control plugins. If your WordPress website has a smooth scrolling plugin or another custom scrollbar plugin installed, they may not work together.

The installation process is typical for WordPress plugins. It is simple and easy. If you need help installing the plugin, read about Installing WordPress plugin.

Click on the Scroller in the WordPress side-menu, to open the plugin settings page:

Beautiful scrollbar for WordPress – The Scroller settings
The Scroller settings

In the plugin settings page, there are several tabs responsible for various groups of plugin settings:

General Settings

All the basic and important settings of the scrollbar are on the general tab. By default, Scroller works to scroll the entire page. However, the Scroller can work for any child container on the page. In order to activate the scroll for any child container, use the CSS class scroller

Styles for Window

This setting enables and disables the styling of the scroll for browser window.

Enable for Touch Devices

The Scroller does not control scrolling on touch devices, but the Scroller can stylize the scroll bar for touch devices in Webkit browsers. This setting enables and disables the styling of the scroll bar on touch devices.

Scrollbar gradient

Switch to turn on the gradient. The additional field for choosing the second color will be available after turning on this switch.

Beautiful scrollbar for WordPress – The Scroller gradient settings
The Scroller gradient settings

Border radius

The border-radius of the scroll bar. You can make the scrollbar completely rectangular with this setting, or select another rounding.

Light color scheme/Dark color scheme

The scrollbar design automatically adapts to the light/dark mode of your browser. You can manage the display styles separately for each of the modes.

  • Background color – this setting allows setting the background color of the scrolling bar. The background is not visible in the default state but will be shown about the click or when hovering on the scrollbar.
  • Scrollbar color – the color of the scroll slider. It has 50% transparency in the default state, but it becomes completely not transparent when hovering or clicking.
The scrollbar design settings for the Light color scheme

Hover animation

The option to enable/disable the scrollbar size animation on hover.

Min Scrollbar length

Depending on the size of the content and the size of the container, the scroll slider can have different lengths. This setting controls the minimal possible scrolling slider length.

Max Scrollbar length

Depending on the size of the content and the size of the container, the scroll slider can have different lengths. This setting controls the maximum possible scrolling slider length.

Scrollbar width

This setting sets the width of the scroll bar in pixels. You can choose between 10 and 100 pixels

Side space

This setting adjusts the free space to the right and left of the scrollbar slider. You can choose from 0 to 50 pixels.

Animate on hover

With this, then you can turn off the animation when hovering on the scrollbar

Scroll speed

Scrolling speed is configured using this setting. The default value is 1. Scrolling will be faster if the value is greater than 1, or less – if the speed is set to less than 1. To completely disable scrolling, set to 0.

Wheel propagation

If this option is on, when the scroll reaches the end of the side, the mouse wheel event will be propagated to the parent element.

Suppress x-scrollbar

Blocks the display of the horizontal scrollbar.

Suppress y-scrollbar

Blocks the display of the vertical scrollbar.

Save Changes

Do not forget to click Save Changes after changing plugin settings. After clicking this button, the settings will be saved and applied to all pages of the website.

Hosting

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.

Was this article helpful to you?