javascript - 隐藏水平滚动条但使数据水平滚动

Question

我想制作图像滚动器，其中图像可以水平滚动，但不希望水平滚动条在滚动时可见。 下面是我的代码笔的链接..

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

如果你想要一个不可见的滚动条，你将需要一些 JavaScript 代码来处理滚动。

我会使用:https://github.com/asvd/dragscroll

然后:

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