滚动条样式-三行代码消除丑陋的滚动条

前言

你是不是还在为丑陋的滚动条样式而烦恼，那挥之不去的滚动条一直在那， 当UI找你的时候，你是不是还在用那是浏览器默认的样式去搪塞他，现在教你三行代码解决它，话不多说，先上代码。

解决方案

&::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  -webkit-overflow-scrolling: touch;
  -overflow-scrolling: touch;
}

通过这种方法经过测试可以使安卓机的滚动条消失,但是部分ios还是不行，身为一个专业的前端，这么的大问题怎么能够止步于此，继续寻找其它方案。

// css

* {
  margin: 0;
  padding: 0;
}
.wrapper {
  overflow: hidden;
}
.inner-wrapper {
  display: flex;
  width: 400px;
  overflow-x: auto;
  transform: translateY(10px);
  margin-top: -10px;
  padding-bottom: 10px;
}
.item {
  flex-shrink: 0;
  width: 200px;
  height: 300px;
  background: coral;
  font-size: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item + .item {
  margin-left: 10px;
}

// html

  

    
1
    
2
    
3
  

亲测，方案二无任何兼容性问题。

代码分析

如果我们仔细看了上面的代码，应该也发现了那“三行”特殊的代码。没错，不要怀疑，就是你看到的那三行。

transform: translateY(10px);
margin-top: -10px;
padding-bottom: 10px;

当然还有一句，需要父容器wrapper `overflow: hidden;`

总结：

给父元素设置固定高度，并且设置溢出隐藏，把滚动条挤出父元素的范围，从而达到隐藏滚动条的目的。这样就大功告成了。

限 时 特 惠： 本站每日持续更新海量各大内部创业教程，一年会员只需98元，全站资源免费下载 点击查看详情
站 长 微 信： lzxmw777