前端修改ios滚动条样式

转载

mob64ca1409d8ea 2024-10-29 14:28:26

文章标签 前端修改ios滚动条样式 scrollbar 移动端 webkit内核隐藏滚动条 文章分类 iOS 移动开发

一个丑丑的滚动条在某些时候是非常碍眼的，移动端由于屏幕小的缘故，更是显眼，最好还是让它能不出现，就不出现。除了用div遮罩外，许多浏览器内核也提供了私有属性控制滚动条的样式。移动端多为weibkit内核，滚动条的定制方案提供的很完善，蛮强大的哦~

最基本的，overflow属性先设置好auto或者scroll，而不是hidden，毕竟我们仅仅是隐藏了滚动条，而不是让它整个都不能滚了。。。

滚动条的涵义

前端修改ios滚动条样式_前端修改ios滚动条样式

::webkit-scrollbar   //1 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。
::webkit-scrollbar-button //2 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::webkit-scrollbar-track   //3  外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::webkit-scrollbar-track-piece //4  内层轨道，滚动条中间部分（除去）。
::webkit-scrollbar-thumb  //5  滚动条里面可以拖动的那部分
::webkit-scrollbar-corner  //6  边角
::webkit-resizer  //7   定义右下角拖动块的样式

注意水平滚动条只能设height，width是随着屏幕变化的。而竖直滚动条只能设width。

隐藏滚动条

使用场景：时间选择器

设计图：

前端修改ios滚动条样式_前端修改ios滚动条样式_02

CSS：

.listcol{  //上图中选中的部分，每一栏的classname
    font-size: 1.3rem;
    line-height: 2rem;
    width: 4.5rem;
    color:#999;
    text-align: center;
    overflow-y:scroll;
    z-index: 10;
    &::-webkit-scrollbar{
        background-color:transparent;
    }
    &__item{
        height: 2rem;
    }
}

自定义滚动条

详见chrome的文档，但支持并不是非常好，建议从低到高，慢慢踩坑。。。

我的一点心得是，首先必须定义一个::webkit-scrollbar，而且里面必须有内容，接下来的::webkit-scrollbar-track等设置才能生效。而且后面的属性会覆盖前面的属性。像corner之类的可能做那么花哨的也很少，主要用的也就是track, track-piece, thumb这三个。

比如：

.listcol{
    &::-webkit-scrollbar{
        background-color:yellow;
        width: 1rem;
    }
    &::-webkit-scrollbar-track{
        background-color: #f25712; //一种偏橘的红色（如果是口红色号的话应该适合白皮）
        //height:5rem;  加了也没用
    }
    &::-webkit-scrollbar-track-piece{
        background-color: #cdcdcd; //一种灰色
        height: 2rem;
    }
    &::-webkit-scrollbar-thumb{
        @include bg('choose'); //就是那个圆里有个对勾的图形，bg是我写的mixin，就是添加个背景图片。
    }
}

效果是这样的：

前端修改ios滚动条样式_scrollbar_03