隐藏水平滚动条，但使数据水平滚动

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;
    }
}

Answer 1

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> 

Answer 2

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.

Answer 3

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

Answer 4

This should work for Chrome

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

Another Solution would be (not really optimal)

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