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

Question

我想制作图像滚动器，其中图像可以水平滚动，但不希望水平滚动条在滚动时可见。 下面是我的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

如果你想要一个不可见的滚动条，你需要一些 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>

Answer 2

试试：https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html

在上面的示例中，项目可以通过“鼠标单击并拖动”滚动，但您可以通过绑定到鼠标滚轮来扩展滚动。

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

这应该适用于 Chrome

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

另一种解决方案将是（不是真正最佳的）

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