CSS隐藏滚动条

491 阅读1分钟

CSS隐藏滚动条

问题:因为公司目前开发的小程序首页有个多医院列表横向显示,左右拖动时比较难看

解决

HTML

<article>
  <div class="title">热门体检中心</div>
  <div class="hospitalBox">
    ........这里就是渲染医院
  </div>
</article>

CSS

.hospitalBox {
  display: flex;//无关紧要
  overflow-x: scroll;//首先设置盒子是横向滚动的
  overflow-y: hidden;//隐藏Y轴滚动
 }
.hospitalBox::-webkit-scrollbar{//重要
  display:none;//使其节点消失
  width:0;
  height:0;
  color:transparent;//颜色设置透明
}

然后真机调试了下,发现拖动时滚动条就消失啦