• 隐藏浏览器原生的滚动条


    起因:

    有这么一个需求,标题栏内容多,你懂的,移动端显示有限,所以就使用滑动的方式展现内容咯,不愿意使用iscoll等插件,那好吧,就使用我们浏览器自带的滚动咯。

    开始咯,设置父元素固定的width,设置overflow-y:hidden,然后子元素flex弹性盒模型布局,这样就就一排撑开了,优雅的滚动起来。

    遇到问题:

    设计师说太丑,一定要把显示在页面上的滚动条隐藏掉。确实,这是一个问题,有个滚动条在,隐藏了美观,那我只能是搜索如何隐藏滚动条,尝试过各种修改滚动条的样式,但是都fail告终,测试机型iphone 6s。所以修改滚动条样式不可行。那就隐藏掉,果不其然,看不到了。代码如下:

    江湖盛传修改滚动条样式的代码(iphone 6s 并无效果,其他机型未测试)

    .rich是指定那个元素的滚动条,这是要的,因为其他位置可能需要显示滚动条,所以前面记得要带上范围的className。

    .rich::-webkit-scrollbar {height:8px; 8px;}
    .rich::-webkit-scrollbar-button {height:0; 0}
    .rich::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment { display:block}
    .rich::-webkit-scrollbar-button:vertical:start:increment,::-webkit-scrollbar-button:vertical:end:decrement { display:none}
    .rich::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal,::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal { border-style:solid; border-color:transparent}
    .rich::-webkit-scrollbar-track:vertical::-webkit-scrollbar-track:horizontal{background-clip:padding-box;background-color:#fff;}
    
    .rich::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.05);
    border-radius: 10px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);}
    .rich::-webkit-scrollbar-thumb:hover {background-color:rgba(0,0,0,0.2);border-radius:10px;-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,.1)}
    .rich::-webkit-scrollbar-thumb:active {background:rgba(0,0,0,0.6);-webkit-border-radius:15px;}
    .rich::-webkit-scrollbar-track:vertical,::-webkit-scrollbar-track:horizontal,::-webkit-scrollbar-thumb:vertical,::-webkit-scrollbar-thumb:horizontal {  border-0;}
    .rich::-webkit-scrollbar-track:hover {-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.4);background-color:rgba(0,0,0,0.01);-webkit-border-radius:15px;}
    .rich::-webkit-scrollbar-track:active {-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.4);background-color:rgba(0,0,0,0.05);-webkit-border-radius:15px;} 
    

    隐藏滚动条的代码

    .box-price::-webkit-scrollbar { display: none; }
    

    这里我也是指定了哪个div的滚动条。温馨提醒,

    visibility="visible|hidden  ,按道理说设置visibility:hidden也是可以隐藏元素,但是我试了设置之后还是滚动条存在,所以乖乖使用display:none吧,难道说滚动条只要有占位置在dom树里面就会显示出来?maybe是这样,最后的最后我就是设置了这么一句display:none达到了我想要的效果了。

    如果大家有更好的方法告诉我哦,在微信浏览器里头如何自定义滚动条的样式。先谢谢你们。

     

  • 相关阅读:
    洛谷P2762 太空飞行计划问题
    网络流24题 gay题报告
    洛谷P1712 区间
    洛谷P2480 古代猪文
    10.9zuoye
    面向对象类编程,计算分数
    请输入验证码优化版
    面向对象式开发程序
    直接选择排序与反转排序
    随机数产生原理
  • 原文地址:https://www.cnblogs.com/wuyinghong/p/6408430.html
Copyright © 2020-2023  润新知