14

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

6
  • You can use absolute positioning for the inner element, then use the button to change the top/left position. Jul 31, 2014 at 19:21
  • What about javascript? davetayls.me/jquery.kinetic << for touch drag jquery-plugins.net/… << scrollbar Jul 31, 2014 at 19:23
  • one extra inner wrapper? or on #modules?
    – veksen
    Jul 31, 2014 at 19:23
  • You can try iscrolljs.com it's weel documented and easy to remove the scroll bar without loosing the scroll capabilities. Jul 31, 2014 at 19:24
  • Mr. Alien thank you, I stumbled on that while looking for a solution, and most likely a custom scrollbar will be used
    – veksen
    Jul 31, 2014 at 19:25

5 Answers 5

26

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/

3
  • 1
    works without overflow-y: hide; (should probably be 'hidden') Nov 18, 2016 at 10:33
  • 4
    Nice solution, but how do users scroll on a non-touch device?
    – isapir
    Sep 5, 2017 at 21:43
  • 3
    @isapir: Move the cursor over the area, then hold shift while using the scroll wheel or equivalent. Jan 9, 2019 at 15:12
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.

0

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

0

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.