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

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

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

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

4 个答案: