滚动条直达底部怎么取消 三行代码消除丑陋的滚动条
你是不是还在为丑陋的滚动条样式而烦恼，那挥之不去的滚动条一直在那， 当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 class="wrapper">
<div class="inner-wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</div>
亲测，方案二无任何兼容性问题。
代码分析如果我们仔细看了上面的代码，应该也发现了那“三行”特殊的代码。没错，不要怀疑，就是你看到的那三行。
transform: translateY(10px);
margin-top: -10px;
padding-bottom: 10px;
当然还有一句，需要父容器wrapper `overflow: hidden;`
总结：
给父元素设置固定高度，并且设置溢出隐藏，把滚动条挤出父元素的范围，从而达到隐藏滚动条的目的。这样就大功告成了。
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
