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

时间:2017-02-08 15:35:04

标签: javascript html css angularjs less

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

4 个答案:

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