滚动条直达底部怎么取消 三行代码消除丑陋的滚动条

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

你是不是还在为丑陋的滚动条样式而烦恼，那挥之不去的滚动条一直在那， 当UI找你的时候，你是不是还在用那是浏览器默认的样式去搪塞他，现在教你三行代码解决它，话不多说，先上代码，今天小编就来说说关于滚动条直达底部怎么取消 三行代码消除丑陋的滚动条?下面更多详细答案一起来看看吧!

滚动条直达底部怎么取消 三行代码消除丑陋的滚动条

前言

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

解决方案

• 方案一

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

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

• 方案二

// css<style>* { 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;}</style>

// html<div > <div > <div >1</div> <div >2</div> <div >3</div> </div></div>

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

代码分析

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

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

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

总结：

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