Hiding the Web Browser Scrollbars in Your Kiosk Application

Web browser hiding the scrollbar

If you’re running your website on a self-service kiosk you may notice some unattractive scrollbars which you’ll probably want to hide.  These scrollbars appear because the HTML content is tall or wide enough where it can’t all fit on a single screen, so the web browser displays a scrollbar so that the user knows there is more content available, they just have to scroll to see it.  While this behavior is usually desirable on a web browser running on a desktop PC it looks unattractive in a touchscreen kiosk.  You may notice that with many mobile devices the scrollbars do not appear until the user touches the screen.

It’s easy to remove the web browser scrollbars from your kiosk application by adding a little CSS to hide the overflow

Once you set the overflow to hidden the web browser scrollbars will disappear.  You should test to make sure all of your website content is still accessible.  You may even want to add your own custom indicator to notify the user that there is more content available or allow them to scroll more easily.  If you need help putting your website on a self-service kiosk please see our article How to Easily Put Your Website on a Kiosk with KioskSimple.

Be Sociable, Share!
Andrew Savala
Follow me

Andrew Savala

Andrew Savala is the CEO of RedSwimmer Inc., creators of the kiosk lockdown software KioskSimple. Andrew has been developing kiosk software since 2007, with an emphasis on self-service retail payment applications.
Andrew Savala
Follow me

Author: Andrew Savala

Andrew Savala is the CEO of RedSwimmer Inc., creators of the kiosk lockdown software KioskSimple. Andrew has been developing kiosk software since 2007, with an emphasis on self-service retail payment applications.