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.
- Kiosk Idle Timeout: What Happens When They Walk Away… - May 25, 2019
- How to Plan Your Payment Kiosk Workflow - May 4, 2019
- Selecting Kiosk Payment Devices, Don’t Paint Yourself into A Corner - April 25, 2019