Skip to content Skip to sidebar Skip to footer

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:

http://iscrolljs.com/

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"