CODEWITHSUNDEEP
htmlcss
veksen
veksen

Reputation: 7003

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: 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

Upvotes: 14

Views: 37851

Answers (5)

SAURABH VERMA
SAURABH VERMA

Reputation: 1

#parent {
    width: A px;
    height: B px;
    overflow: hidden;
}

#child {
   width: C px; 
   height: (greater_than_B) px;
   overflow-x: auto;
}

1-Make overflow hidden in parent.

2-Make hight of child modules greater than parent so that scrolls are hide

Upvotes: 0

Dayron Alfaro
Dayron Alfaro

Reputation: 21

#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.

Upvotes: 2

areim
areim

Reputation: 3769

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/

Upvotes: 29

Jason
Jason

Reputation: 4159

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.

Upvotes: 0

Daniel Schmidt
Daniel Schmidt

Reputation: 11931

You could try using the ::-webkit-scrollbar pseudo element, like shown here.

Upvotes: 0

Related Questions