滑动条css-三行代码清除丑陋的滚动条

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

前言

你是否还在为丑陋的滚动条样式所困扰，挥之不去的滚动条还在，当UI找到你的时候，你还在用浏览器默认的样式来欺骗他吗？ ，现在教大家三行代码来解决。 废话不多说，我们先上代码吧。

解决方案

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

通过这些方法测试后，Android手机的滚动条可以消失，部分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
  

根据个人测试，第二种方案不存在兼容性问题。

代码分析

如果我们仔细观察里面的代码滑动条css，应该还会发现“三行”特殊代码。 没错，别怀疑，就是你看到的那三行。

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

其实还有一句需要父容器包装器`overflow:hidden;`

总结：

为父元素设置固定的高度，但将溢出设置为隐藏，将滚动条推出父元素的范围滑动条css，从而达到隐藏滚动条的目的。 这个做完了。