html - Horizontally scrollable without scrollbar

Question

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: http://jsfiddle.net/Gxm2z/

#container {
    width: 300px
}
#modules {
    height: 50px;
    padding: 5px;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.module {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #ddd;
}

How can I achieve the same result without a scroll bar? I'm ok with a javascript/jQuery plugin.

The plan is to use arrows, and maybe a custom scrollbar

Answer 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/