Completely Customize The Scrollbar For Each Website In Chrome With Rescroller

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.

Rescroller

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.

Size

‘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.


Color

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.

Other

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.

Rescroller-scrollbar-customized

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 Chrome Web Store

Advertisement
  • http://www.greggdeselms.com/ Gregg L. DesElms

    Do not underestimate the sheer coolness of this Chrome extension. It not only allows you to customize your Chrome scrollers, but, far more importantly, it fixes a long-standing problem with how Google (and other websites which copy what Google’s doing) uses scripted scrollers which have no arrow buttons at the ends…

    …and so, because there are no arrow buttons on most Google sites now, scrolling becomes nightmarish because you can no longer just put your mouse pointer onto the down arrow button at the bottom of the vertical scroller, for example, and just scroll three lines at a time with each click on said button. Instead, with Google’s new scripted scrollers, the only way to scroll is to grab the scroll tab in the middle and drag it up/down.

    Well, this magnificent little RESCROLLER extension completely repairs the problem, providing normally-functioning (even if not normal looking) scrollers, with arrow buttons at their ends, as is SUPPOSED to be the way things are.

    I am completely in LOVE with RESCROLLER. Yes, it has it’s little oddities… most notably that it sometimes takes a moment for it to position itself in the browser window upon initial page load, and you might have to wait a half-second, once in a while, for it to show-up and be properly sized. But that’s the exception, not the rule. And, honestly, it’s so wonderful to have up/down arrow buttons at the ends of the scroller again, even on Google sites, that I’m happy, no matter the little oddities.

    I LOVE RESCROLLER!!!!

    ___________________________
    Gregg L. DesElms
    Napa, California USA
    gregg at greggdeselms dot com