当前位置:首页 > 技术教程 > 正文

滚动条样式,滚动条样式和总长度,三行代码消除丑陋的滚动条

滚动条样式,滚动条样式和总长度,三行代码消除丑陋的滚动条

前言你是不是还在为丑陋的滚动条样式而烦恼,那挥之不去的滚动条一直在那, 当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="sj-298a9e78a25d53f2 wrapper"> <div class="sj-9e78a25d53f2256a inner-wrapper"> <div class="sj-a25d53f2256a3b85 item">1</div> <div class="sj-53f2256a3b8593b8 item">2</div> <div class="sj-256a3b8593b8a969 item">3</div> </div></div>

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

代码分析

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

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

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

总结:

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

发表评论

推荐文章

  • sem开户(sem推广开户渠道)sem开户(sem推广开户渠道)
  • 炫酷花里胡哨倒计时引导页HTML源码炫酷花里胡哨倒计时引导页HTML源码
  • SEO网站推广怎么做(SEO网站推广的6个方法与技巧)SEO网站推广怎么做(SEO网站推广的6个方法与技巧)
  • 新文章