我想制作图像滚动条,其中图像可以水平滚动但不希望滚动时水平滚动条可见。 下面是我的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;
}
}
答案 0 :(得分:2)
如果你想要一个不可思议的滚动条,你需要一些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>
答案 1 :(得分:1)
尝试:https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html
在上面的示例中,可以滚动项目&#34;鼠标单击并拖动&#34;但您可以通过绑定到鼠标滚轮来扩展滚动。
答案 2 :(得分:1)
.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>
答案 3 :(得分:-1)
这适用于Chrome
::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
}
另一种解决方案是(并非真正优化)
-webkit-scrollbar {
height: 0;
width: 0;
}