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

你是不是还在为丑陋的滚动条样式而烦恼,那挥之不去的滚动条一直在那, 当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

    分享
    投诉
    首页