Here are two SCSS mixins that I have used to hide scrollbars while maintaining touch scrolling on mobile devices.
@mixin horizontallyScrollable() {
overflow: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
// hide scrollbar: IE and Edge
-ms-overflow-style: none;
// hide scrollbar: Chrome, Safari, Opera
&::-webkit-scrollbar { display: none; }
// hide scrollbar: CSS Scrollbar Styling spec standard (Firefox 64+)
scrollbar-width: none;
// we do not want overflow-x: hidden; to hit mobile accidentally
@media screen and (min-width: 1024px) {
// hide scrollbar: Firefox 63 and earlier (but also prevents touch scroll)
@-moz-document url-prefix() { & { overflow-x: hidden; } }
// undo if CSS Scrollbar Styling spec is supported
@supports (scrollbar-width: none) {
@-moz-document url-prefix() { & { overflow-x: auto; } }
}
}
}
@mixin verticallyScrollable() {
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
// hide scrollbar: IE and Edge
-ms-overflow-style: none;
// hide scrollbar: Chrome, Safari, Opera
&::-webkit-scrollbar { display: none; }
// hide scrollbar: CSS Scrollbar Styling spec standard (Firefox 64+)
scrollbar-width: none;
// we do not want overflow-y: hidden; to hit mobile accidentally
@media screen and (min-width: 1024px) {
// hide scrollbar: Firefox 63 and earlier (but also prevents touch scroll)
@-moz-document url-prefix() { & { overflow-y: hidden; } }
// undo if CSS Scrollbar Styling spec is supported
@supports (scrollbar-width: none) {
@-moz-document url-prefix() { & { overflow-y: auto; } }
}
}
}
Nothing too special here: just that all the pieces for maximal cross-browser support is figured. You can even make it simpler now if you drop support for Firefox 63 and earlier :)
Usage: apply these styles to a container that has a child that is larger than the container. You may also need to add JavaScript buttons for scrolling the child as visual indicators so that people don't have to wonder what they are looking at :)
Top comments (0)