How to Customize Google Chrome’s Scrollbar

Google Chrome has few options to customize its page scrollbar with. Wouldn’t it be great if you could customize the scrollbar’s colors, buttons, dimensions and scroll speeds? Well, you can do just that with a few Chrome extensions.

Customizing the Google Chrome Scrollbar with Rescroller

Rescroller is perhaps the best extension for customizing the Chrome scrollbar with. Head over to this page to add Rescroller to the browser. Once added, you can click on the Rescroller Settings button on the toolbar to open the page below.

Now scroll down a little to General options with which you can customize the width of the scrollbar. You can drag the Scrollbar Size bar to adjust the width of the scrollbar. That will configure the width of the bar on the right of the Rescroller page.

Directly below that slidebar there’s a Blacklist text box. There you can enter website URLs to retain the default scrollbar on. Then the customized scrollbar won’t be included on those websites.

Scroll down to the Slider options to configure the slider colors. Click the Color box to open a palette from which you can choose alternative colors for the slider. Select a color from there and click Apply on the palette to switch the slider color.

Alternatively, add background images to the vertical and horizontal sliders. Press the Select Image buttons to choose an image for the slider. Then press Open to add the image to slider as below.

The Slider options also include Shadows and Borders slidebars. Dragging the Borders bar upward adds a border to the slider. Drag the Shadows bar up to apply a shadow effect to it.

Most sliders are square by default. However, you can customize the Chrome slider so that it’s more curved. Drag the Rounded Corners slidebar further right to add curved corners to the slider as below.

Below that you can select Customize Style When Hovering and Customize Style When Clicking check boxes. Select those to open the options shown below. With those settings you can further customize the slider colors when you hover or select it with cursor.

With the Background options you can customize the main scrollbar, but not the slider. These settings are almost identical to the slider options. As such, you can customize the color, shadows and borders of the main scrollbar much the same.

A little further down the Rescroller page there are Buttons options. If it’s not already selected, click Show scroll buttons to include buttons on the scrollbar and expand those settings. Then you can click the Color box to choose new colors for those buttons. If you have some good button images, click the X on the Up, Right, Bottom and Left boxes and then press Select Image to add them to the scrollbars. Check out this page on the Iconfinder website to find some arrow button icons for the scrollbar.

You can also add rounded corners to the arrow buttons. Scroll down to the bottom of page, and then drag the Rounded Corners bar there further right. In addition, you can select Customize Style When Hovering and Customize Style When Clicking options for the arrow buttons.

Add a Minimal Scrollbar Design to Chrome

For a quick scrollbar customization, check out the Minimal Scrollbar extension. This is an extension that adds a new scrollbar to Google Chrome that expands when you hover the cursor over it and contracts, or minimizes, when the scrollbar isn’t selected. It also has a transparent slider with rounded corners.

Open this page to and press the green button there to add this extension to Chrome. Then restart the browser, and open a few pages to try out the new scrollbar. You’ll find the pages include the scrollbar shown in the snapshot directly below.

So this scrollbar effectively has a reduced width when it’s not selected. Hover the cursor over it to expand the scrollbar. The transparent slider is also something new.

This extension doesn’t have many customization options, but you configure it so that the default scrollbar remains in place on certain pages. Right-click the Minimal Scrollbar button on the toolbar and then select Options to open the tab below. There you can enter page URLs in the text box so that they don’t include the customized scrollbar.

Customize the Scrollbar Page Scroll

You can’t customize the scrollbar page scroll, otherwise scroll speed, with either Rescroller or Minimal Scrollbar. However, you can do that with the Chromium Wheel Smooth Scroller extension, which Chrome users can add to the browser from this page. Then right-click the Chromium Wheel Smooth Scroller button on toolbar and select Options to open the page shown below.

At the top you have mouse wheel options you can customize the mouse wheel scroll with. For example, each mouse wheel roll scrolls the slider down the page by a specific amount; and you can customize that by dragging the Step Size bar further left or right. Drag the bar right to increase the number of pixels the slider jumps down the page with each wheel roll, which effectively boosts the scroll speed.

Just below that there are Smoothness and Smoothness (Forepart) bars. Drag those bars further right to make the page scrolling with wheel rolls smoother. If you drag them to the far left, the page scroll with mouse wheel will be a little jerkier.

You can also scroll up and down page with the arrow keys. Below the mouse options there are settings you can customize the keyboard page scroll with. The options are basically the same as those for mouse, except that they customize Chrome’s keyboard scrollbar settings.

At the bottom of the page there’s a Black List text box. There you can enter the URLs of websites to exclude from the selected Chromium Wheel Smooth Scroller settings.

So with those extensions you can now customize the Google Chrome scrollbar. You can give the scrollbar an overhaul with Rescroller, add a new transparent slider to the browser with Minimal Scrollbar or further configure the page scroll with Chromium Wheel Smooth Scroller.