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
html{overflow:hidden;}
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.
- Avoid These 12 Mistakes Companies Make on Their First Payment Kiosk - April 6, 2019
- 6 Tips for Boosting Customer Engagement at Your Kiosks - March 23, 2019
- How to Create a Customer Survey Kiosk - November 8, 2017