Try Now
+31 (0)70 31 84 404
Twitter: @H5mag
Abygail Geurts
Publication date
24 November 2015

Scroll in Style with Custom Scrollbars

It is now possible to style the scrollbars in a magazine. This was not an easy feat, as most browsers do not allow native scrollbars to be styled and each browser treats scrollbars differently.

Magazines built with H5mag have the capability to be viewed on many devices with many different screen sizes. We make sure that a certain area of our content is always visible, while there is adjustable extra room around the content, which we call the artboard bleed. This allows for a full screen experience on almost all browsers and devices, without getting a letterbox effect.

Missing content

Those bleeds will not be visible on some devices. That should not be a problem normally, because the content area will be visible at all times. But what if our content is too much for the screen and has to scroll? The default scrollbars for all browsers are positioned on the right of the viewport (when the display language flows left to right). Cutting that part off because that room is reserved as bleed also cuts of our scrollbar! This is not very user friendly, becauses sometimes it is not obvious that the page can be scrolled.

Unfortunately, using CSS to target the native scrollbars to always stay visible is not possible. Not all browsers support native scrollbar styling, and of those that do, positioning the scrollbars is not possible.

jScrollPane to the rescue...?

So we had to find a custom scrollbar. Over the last weeks, we have tried integrating a custom scrollbar called jScrollPane. We've used this before with great success for one of our clients, for a piece of custom scripting to create a navigational element.

However, using it for all scrollable elements within H5mag  was creating some serious problems. It uses absolute positioning so hardware acceleration of scrolling is disabled, causing a jerky effect. In Safari 9 the content would spontaenously scroll back up after scrolling down. And let's not talk about Internet Explorer. So, we needed a different scrollbar.

The main problem with jScrollPane was that is was trying to mimic the default behaviour of scrollbars. As each operating system and sometimes even each browser handles certain details of scrolling differently, the fake scrolling was unable to mimic everything correctly.

The solution

Remember the problem we started out with, that the scrollbars are displayed off-screen? Sometimes the solution is staring you right in the face. Instead of replacing the actual scrollbars, just hide them!

Doing that keeps all the default operation of the scrollbar. It also removes the need for updating DOM-elements to simulate a scroll — the element is still scrolling natively. The only thing that needs to be updated is the drag handle of the scrollbar. Much simpler and smoother than repositioning the content of the scrollable element using absolute positioning.

So we went ahead and built a version that works for all magazines. It's now available for all users. We've also wrapped it up as a jQuery plugin. You can find that on my GitHub page.

How it works...

The basic trick of the new scrollbar is to wrap all content inside the scrollable area in a new container, which we position to be slightly wider than the original area. By making the content outside the original area hidden, we can hide our scrollbar! The scrolling still works of course, because the new container is still scrollable.

To make sure users still see the scroll capability, we add a custom scrollbar track and drag handle. The drag handle is then positioned so that its size and position reflect the visible area on the screen. After that, add some event handlers to make sure the position is updated on scroll and correct the scroll position of the area when the track is clicked or the drag handle is dragged.

Styling your own magazine scrollbars

Styled scrollbars are now available in all newly created magazines. The scrollbars will match the theme of the navigation bar. As a nifty iOS-esque detail, the scrollbars fade out when you're not scrolling — giving your content and design full focus. If you want to go further, you can use CSS to create your own unique scrollbar style.

To check out the scrollbars in action, just visit one of our magazines!

Return to blog overview