Horizontally Scrollable Without Scrollbar
I'm trying to mimic the behavior of overflow-y:hidden to overflow-x, but it doesn't behave the same way. overflow-x:hidden doesn't allow to scroll (by dragging the mouse). See: htt
Solution 1:
this is my solution CSS based - simple and nice on all devices, no need for additional JS.
- add fixed height and overflow hidden to parent element (in your case
#container
) - enlarge height of
#modules
- this create enough place hidden under parent element for scrollbar (because of smaller#container
height, this place is invisible) using
-webkit-overflow-scrolling:touch;
is good choice, make nice behavior on iPad and iPhone#container { width: 300px; height: 60px; overflow: hidden; } #modules { height: 90px; /* 40px - more place for scrollbar, is hidden under parent box */padding: 5px; white-space: nowrap; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
live demo: http://jsfiddle.net/s6wcudua/
Solution 2:
#modules {
height: 50px;
padding: 5px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
}
This only work in webkit based browsers.
Solution 3:
You could try using the ::-webkit-scrollbar
pseudo element, like shown here.
Solution 4:
Best Javascript custom scrollbar available, in my opinion. It will work great in Mobile, IE9+ and modern browsers. Plenty of options and callbacks. And yes, you can disable the visible scrollbar, but still retain horizontal scrolling.
Post a Comment for "Horizontally Scrollable Without Scrollbar"