Hide Horizontal Scroll Bar but make data scroll horizontally

Question

I want to make image scroller where image can be scrolled horizontally but dont want horizontal scroll bar to be visible while scrolling. Below is the link to my codepen..

http://codepen.io/rajMrPerfect/pen/PWewRM?editors=0100

<div class="scroll">
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
  </div>

.scroll {
    height: 180px;
    margin: auto;
    overflow-x: auto;
    overflow-y:hidden;
    white-space: nowrap;
    box-shadow: 0 0 10px #000;  
    img {
        margin: 20px 10px 0 10px;
    }
}

Possible duplicate of: http://stackoverflow.com/a/13184693/2232127 — JensV, Feb 08 '17 at 15:37
I want to scroll it as the normal scroller but hide the scroll bar. — Raaj Dubey, Feb 08 '17 at 15:41
so what would the user interaction be? mousewheel? dragging an invisible scrollbar? — Andrew Monks, Feb 08 '17 at 15:43
maybe something like this? http://asvd.github.io/dragscroll/ — Andrew Monks, Feb 08 '17 at 15:46

score 2 · Answer 1 · answered Feb 08 '17 at 15:53

If you want an inivisble scrollbar you will need some javascript code to handle the scrolling.

I would use: https://github.com/asvd/dragscroll

Then:

.scroll {
  height: 180px;
  margin: auto;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 0 10px #000; 
}

img {
  margin: 20px 10px 0 10px;
}

<script src="http://asvd.github.io/dragscroll/dragscroll.js"></script>
<div class="scroll  horizontal dragscroll">
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" /><img      src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" /><img     src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" /><img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" /><img  src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
  </div>

score 1 · Answer 2 · answered Feb 08 '17 at 15:59

1

Try: https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html

In the above examples, the items can be scrolled on "mouse click and drag" but you can extend the scroll by binding to the mousewheel.

answered Feb 08 '17 at 15:59

Marian07

2,303
4
27
48

score 1 · Accepted Answer · answered Feb 08 '17 at 16:08

.scroll {
  height: 180px;
  margin: auto;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 0 10px #000; 
}

img {
  margin: 20px 10px 0 10px;
}

<script src="http://asvd.github.io/dragscroll/dragscroll.js"></script>
<div class="scroll  horizontal dragscroll">
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" /><img      src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" /><img     src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" /><img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" /><img  src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
  </div>

.scroll {
  height: 180px;
  margin: auto;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 0 0 10px #000; 
}

img {
  margin: 20px 10px 0 10px;
}

<script src="http://asvd.github.io/dragscroll/dragscroll.js"></script>
<div class="scroll  horizontal dragscroll">
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" /><img      src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" /><img     src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" /><img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" /><img  src="http://placehold.it/100x100" />
   <img src="http://placehold.it/100x100" />
  </div>

stackg91 · Answer 4 · 2017-02-08T15:40:23.137

-1

This should work for Chrome

::-webkit-scrollbar,
    *::-webkit-scrollbar {
        display: none;
    }

Another Solution would be (not really optimal)

-webkit-scrollbar {
    height: 0;
    width: 0;
}

edited Feb 08 '17 at 15:40

answered Feb 08 '17 at 15:37

stackg91

584
7
25

No good for cross browser though: http://caniuse.com/#search=scrollbar, only works really in chrome – Andrew Monks Feb 08 '17 at 15:39

Hide Horizontal Scroll Bar but make data scroll horizontally

4 Answers4