Custom Scroll Bars
When building custom websites, we’re always looking to develop new elements that will enhance the polish and experience of our finished product. One such enhancement is a custom scrollbar to replace the system default. System default scrollbars vary in appearance across different browsers and operating systems, sticking out like a visual sore thumb in the otherwise-cohesive interface of the websites we build.
Implementing custom scrollbars in our projects allows the opportunity to create a consistent interface across all platforms and lets us fix some minor user experience issues that come with using a computer’s default scrollbar. However: in order to confidently implement this solution, we must address the costs of changing the defaults.
The Costs.
A primary concern when implementing a custom scrollbar is the performance cost, demanding more of the browser and (on older or lower-powered systems) slowing down the website’s reactiveness to user input. Although this is of minimal issue on desktop browsers, it is noticeable on mobile devices with fewer computational resources to spare. For this reason, we disable custom scrollbars on mobile browsers.
Custom scrolling can be more than a new coat of paint — we’re able to modify the result of a user’s scrolling action as well. We call this scroll takeover, and it’s significantly more performance intensive than simple changing the appearance of a scrollbar. To see scroll takeovers in action, look at Apple's Mac Pro website or a website we built, Healthcare-Malpractice.com. Although some scroll takeover effects are unique and memorable, we still disable them on mobile. For any site that takes over scrolling behavior, you can expect some users to wonder why the interface isn’t responding to their input in the way they expect, taking away from the user’s experience. Scroll takeover can make scrolling faster or slower, or can trigger a longer action such as bringing up the next card in an interface. These effects can be used to emphasize or enhance a presentation, but we recommend using them sparingly — any situation where the interface doesn’t respond in the expected fashion can create broken expectations and frustration.
Another cost of creating custom scrollbars is that, depending on the solution you use, various input methods that users rely on may not work. System default scrollbars accept various kinds of user input: mouse scrollwheels, clicking and dragging on the scrollbar, up and down keyboard arrows, page up/page down keys, and swipe up/swipe down interactions on mobile. Our current implementation of custom scrollbars will not accept input from any keyboard keys until a user clicks inside the site, an improvement we are looking to make in the future.
As the computing power of phones and tablets improves, mobile browsers will have the resources to handle custom scrollbars. This will allow us to potentially use the same customized interface across devices.
Improved Aesthetics.
Custom scrollbars are one refinement that can elevate the fit and finish of a website above the sea of template-driven competitors. Although visitors may not always notice custom scrollbars, they are nonetheless an ingredient that can improve cohesion of the user experience. Just as you may not notice the typeface in which an article is written, you are likely not to take note of most details in an interface — instead, it’s important that everything works as expected and fits as part of a seamless whole.
Another improvement is their greater flexibility in positioning. If the page contains important fixed objects — such as a header or footer, the scrollbar can be positioned above or below those objects to indicate that they will be not be scrolled with the rest of the page.
For example: throughout our site, we’ve placed a fixed footer with a custom scrollbar resting right above it. The footer’s position allows access to vital footer information even on an infinitely scrolling page, like on our News page — while the custom scrollbar allows us a visual cue to show which elements of the page are scrollable. We’ve also customized the scrollbar with a custom color scheme and positioned it as an overlay so that page animations happen on the canvas behind the scrollbar, increasing immersion and cohesion.
A similar example appears on Healthcare-Malpractice.com, where you can see the custom-themed scrollbar resting just below the fixed header — indicating that even as you scroll down the page, information in the header will remain available.
Better Functionality.
Custom scrollbars can go beyond improving the look of a site to add to its functionality as well. With a custom scrollbar, we can consistently position our interface, eliminating jitter as a page readjusts or deals with overlapping scrollable areas without making the site appear clunky. All of these functionality issues, can be the difference between an unpleasant experience or cohesive, positive journey through a website.
Transitioning between the pages on a website should be a smooth experience, one unhindered by unnecessary repositioning of the layout. On websites using a default scrollbar, switching between pages can create a sudden horizontal shift as the page re-centers based on whether a scrollbar is or isn't present. Because we build on a 100% AJAX framework and often implement unique page transition animations, this unwanted content shift is even more pronounced.
Since they are part of the website rather than part of the browser chrome, we arable to use custom scrollbars to eliminate this jitter effect and allow a consistent transition while browsing.
Another functionality benefit of custom scrollbars is revealed when the page contains multiple, layered windows that are scrollable.
On Healthcare-Malpractice.com, when you open a case study in a modal window, the single scrollbar on the right side of the browser controls the actions of the modal window instead of an entirely new scrollbar appearing to control scrolling of the modal window.
On another website, for McKennett Law, there is no custom scrollbar. As a result, when a modal window is opened, two default scrollbars appear, one for the modal window and one for the page visible behind it. Although navigable in the average web browser, it is a superior experience to provide a single custom scrollbar that controls whichever page or element is in the foreground.
Our Technique.
In order to maintain that ideal user experience on a webpage, we utilize an element that has overflow scroll to allow our custom scrollbars to behave like native scrollbars. We then wrap that element in a container with overflow hidden and offset the inner element by the size of the scrollbars in order to hide them. On browsers that support it (webkit based) we use the pseudo css property of :scrollbar (:-webkit-scrollbar) to set the size of the scrollbar to 0 width and 0 height. This allows us not to 'hide' the scrollbars and produce a more seamless experience. Inside the wrapper, and positioned over the scrolling element, we create elements for the vertical and horizontal scrollbars that can be stylized.
In order to cover the scrollbars, we use some javascript to detect the correct scrollbar size, and set a class on the html tag with the correct size.
From here we attach event listeners for the scroll event to update the display of the handle and mouse clicks for the handle for dragging support. By implementing these techniques, we are able to maintain the behaviors that visitors are familiar with while refining the overall feel of a custom website.
Conclusion.
We build websites that are already visually and functionally distinct, so we want every aspect of the website to add to the sense of a unique, united interface. Although the potential drawbacks of performance must be paid proper attention, customizing a site’s scrollbar so that it fits in with the rest of the site’s custom interface provides an important part of an overall polished website experience. By building custom scrollbars, we not only refine the look, but also provide more flexibility in the design of our sites.
Implementing custom scrollbars in our projects allows the opportunity to create a consistent interface across all platforms and lets us fix some minor user experience issues that come with using a computer’s default scrollbar. However: in order to confidently implement this solution, we must address the costs of changing the defaults.
The Costs.
A primary concern when implementing a custom scrollbar is the performance cost, demanding more of the browser and (on older or lower-powered systems) slowing down the website’s reactiveness to user input. Although this is of minimal issue on desktop browsers, it is noticeable on mobile devices with fewer computational resources to spare. For this reason, we disable custom scrollbars on mobile browsers.
Custom scrolling can be more than a new coat of paint — we’re able to modify the result of a user’s scrolling action as well. We call this scroll takeover, and it’s significantly more performance intensive than simple changing the appearance of a scrollbar. To see scroll takeovers in action, look at Apple's Mac Pro website or a website we built, Healthcare-Malpractice.com. Although some scroll takeover effects are unique and memorable, we still disable them on mobile. For any site that takes over scrolling behavior, you can expect some users to wonder why the interface isn’t responding to their input in the way they expect, taking away from the user’s experience. Scroll takeover can make scrolling faster or slower, or can trigger a longer action such as bringing up the next card in an interface. These effects can be used to emphasize or enhance a presentation, but we recommend using them sparingly — any situation where the interface doesn’t respond in the expected fashion can create broken expectations and frustration.
Another cost of creating custom scrollbars is that, depending on the solution you use, various input methods that users rely on may not work. System default scrollbars accept various kinds of user input: mouse scrollwheels, clicking and dragging on the scrollbar, up and down keyboard arrows, page up/page down keys, and swipe up/swipe down interactions on mobile. Our current implementation of custom scrollbars will not accept input from any keyboard keys until a user clicks inside the site, an improvement we are looking to make in the future.
As the computing power of phones and tablets improves, mobile browsers will have the resources to handle custom scrollbars. This will allow us to potentially use the same customized interface across devices.
Improved Aesthetics.
Custom scrollbars are one refinement that can elevate the fit and finish of a website above the sea of template-driven competitors. Although visitors may not always notice custom scrollbars, they are nonetheless an ingredient that can improve cohesion of the user experience. Just as you may not notice the typeface in which an article is written, you are likely not to take note of most details in an interface — instead, it’s important that everything works as expected and fits as part of a seamless whole.
Another improvement is their greater flexibility in positioning. If the page contains important fixed objects — such as a header or footer, the scrollbar can be positioned above or below those objects to indicate that they will be not be scrolled with the rest of the page.
Better Functionality.
Custom scrollbars can go beyond improving the look of a site to add to its functionality as well. With a custom scrollbar, we can consistently position our interface, eliminating jitter as a page readjusts or deals with overlapping scrollable areas without making the site appear clunky. All of these functionality issues, can be the difference between an unpleasant experience or cohesive, positive journey through a website.
Transitioning between the pages on a website should be a smooth experience, one unhindered by unnecessary repositioning of the layout. On websites using a default scrollbar, switching between pages can create a sudden horizontal shift as the page re-centers based on whether a scrollbar is or isn't present. Because we build on a 100% AJAX framework and often implement unique page transition animations, this unwanted content shift is even more pronounced.
Since they are part of the website rather than part of the browser chrome, we arable to use custom scrollbars to eliminate this jitter effect and allow a consistent transition while browsing.
Another functionality benefit of custom scrollbars is revealed when the page contains multiple, layered windows that are scrollable.
Our Technique.
In order to maintain that ideal user experience on a webpage, we utilize an element that has overflow scroll to allow our custom scrollbars to behave like native scrollbars. We then wrap that element in a container with overflow hidden and offset the inner element by the size of the scrollbars in order to hide them. On browsers that support it (webkit based) we use the pseudo css property of :scrollbar (:-webkit-scrollbar) to set the size of the scrollbar to 0 width and 0 height. This allows us not to 'hide' the scrollbars and produce a more seamless experience. Inside the wrapper, and positioned over the scrolling element, we create elements for the vertical and horizontal scrollbars that can be stylized.
CSS:
div.outer-scroll {
position: relative;
overflow: hidden;
}
div.inner-scroll {
position: absolute;
left: 0;
right: -17px;
top: 0;
bottom: -17px;
overflow: scroll;
}
div.inner-scroll::-webkit-scrollbar {
width: 0px;
height: 0px;
}
div.inner-scroll::scrollbar {
width: 0px;
height: 0px;
}
HTML:
div.outer-scroll {
position: relative;
overflow: hidden;
}
div.inner-scroll {
position: absolute;
left: 0;
right: -17px;
top: 0;
bottom: -17px;
overflow: scroll;
}
div.inner-scroll::-webkit-scrollbar {
width: 0px;
height: 0px;
}
div.inner-scroll::scrollbar {
width: 0px;
height: 0px;
}
HTML:
<div class="outer-scroll">
<div class="inner-scroll">
// Content goes here
</div>
<div class="bar-v">
<div class="bar-h">
In order to cover the scrollbars, we use some javascript to detect the correct scrollbar size, and set a class on the html tag with the correct size.
JS:
(function() {
var sw, el = document.createElement('div');
el.className = 'inner-scroll';
el.style.cssText = 'width: 100px; height: 100px; top: -150px; left: -150px; right: auto; bottom: auto;';
document.body.appendChild(el);
sw = el.offsetWidth - el.clientWidth;
document.body.removeChild(el);
document.documentElement.className = 'scroll-'+sw;
})();
CSS:
html.scroll-0 div.inner-scroll {
right: 0;
bottom: 0;
}
html.scroll-15 div.inner-scroll {
right: -15px;
bottom: -15px;
}
html.scroll-17 div.inner-scroll {
right: -17px;
bottom: -17px;
}
(function() {
var sw, el = document.createElement('div');
el.className = 'inner-scroll';
el.style.cssText = 'width: 100px; height: 100px; top: -150px; left: -150px; right: auto; bottom: auto;';
document.body.appendChild(el);
sw = el.offsetWidth - el.clientWidth;
document.body.removeChild(el);
document.documentElement.className = 'scroll-'+sw;
})();
CSS:
html.scroll-0 div.inner-scroll {
right: 0;
bottom: 0;
}
html.scroll-15 div.inner-scroll {
right: -15px;
bottom: -15px;
}
html.scroll-17 div.inner-scroll {
right: -17px;
bottom: -17px;
}
From here we attach event listeners for the scroll event to update the display of the handle and mouse clicks for the handle for dragging support. By implementing these techniques, we are able to maintain the behaviors that visitors are familiar with while refining the overall feel of a custom website.
Conclusion.
We build websites that are already visually and functionally distinct, so we want every aspect of the website to add to the sense of a unique, united interface. Although the potential drawbacks of performance must be paid proper attention, customizing a site’s scrollbar so that it fits in with the rest of the site’s custom interface provides an important part of an overall polished website experience. By building custom scrollbars, we not only refine the look, but also provide more flexibility in the design of our sites.
About Mira Brody
Mira Brody is an editor, writer, and marketing expert with 12+ years of experience. She has worked as a local news reporter, a writer/editor, and as a leader in large-scale branding strategy. Mira worked at JTech as the staff writer and editor for internal and client projects from March 2015 to December 2019.
More articles by Mira: The Pastas of Programming | The Good, Bad and Ugly of Company Slogans | Note Taking Improves Workplace Skills