Google Chrome – Completely customize the scrollbar.
Over the past few years, Google Chrome has become the default browser for a majority of internet users, and its standard-compliance means websites render on it exactly the way they are coded by their developers. But sometimes, a developer may come up with a somewhat quirky design that actually leaves the experience sub-par for end users. For instance, a few days back, I visited a website that had the least user-friendly scrollbar I had ever encountered, making page scrolling a pain. Though that’s not say that the whole website needed a complete makeover, as the rest of the UI just looked fine. Looking for a solution, I came across Rescroller – a handy Google Chrome extension that allows users to quickly customize the scrollbar on websites the way they want.
Rescroller allows you to tweak and personalize the look of the scrollbar across all websites. The parameters you can change include color, shadow, border, hover effect etc. using GUI controls. If that’s not enough, the extension also lets you have complete control over it by manually tweaking its CSS. This makes the extension suitable for both casual and power users alike. Lets find out how it works.
When launched, Rescroller presents you with its simple dashboard that keeps all the settings organized under different sections. The first in line is the General section where you can control the width of the scrollbar using a slider. You can also blacklist certain websites for which you want to keep their own default scrollbars, and any changes you make here will not be applied to them.
‘Slider’ allows you to specify the color of the scrollbar element; all you need to do is click the Color palette, followed by selecting a color. Rescroller even shows you the HEX code of the color you have selected, and offers the option of setting custom vertical or horizontal images for the scrollbar. Furthermore, you can control both shadow size and border width, and change their respective color settings as well. There’s also a Rounded Corners slider, which should be self-explanatory. You can also customize the scrollbar’s style for when you’re hovering your mouse over it, or when you click it.
The background color and image of the scrollbar can also be customized in a similar fashion. For instance, you can set width and size of boarders and shadow, toggle arrow buttons. Lastly, if you know a bit of CSS and want to do things manually, you can make use of the ‘Use Custom CSS (Advanced Users Only) option under the Miscellaneous section.
Rescroller applies all these changes to the scrollbar element without requiring you to manually edit CSS files, or restart your browser. The results is a scrollbar designed just the way you like it (or just the way you end up tweaking it), as you can see in the screenshot below.
The extension is available only for Google Chrome at the moment, and you can grab it for free via the following link.
Install Rescroller from here.