滑动条的优化

一.滚动条的样式更改   

  • ::-webkit-scrollbar 滚动条整体部分
  • ::-webkit-scrollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
  • ::-webkit-scrollbar-track  滚动条的轨道(里面装有Thumb)
  • ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
  • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
  • ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
  • ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

想给单个节点设置滚动条,即在上面的伪类前面加上 ID/样式名字:例如:

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
.scroll::-webkit-scrollbar  
{  
    width: 16px;  /*滚动条宽度*/
    height: 16px;  /*滚动条高度*/
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
.scroll::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  /*滚动条的背景区域的圆角*/
    background-color: red;/*滚动条的背景颜色*/  
}  
  
/*定义滑块 内阴影+圆角*/  
.scroll::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  /*滚动条的圆角*/
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: green;  /*滚动条的背景颜色*/
}  

二.兼容性

上述样式是指针对谷歌浏览器生效的。(不兼容火狐,IE)

IE 的写法和上面不太一样:如下

  1. scrollbar-arrow-color: color; /*三角箭头的颜色*/
  2. scrollbar-face-color: color; /*立体滚动条的颜色(包括箭头部分的背景色)*/
  3. scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
  4. scrollbar-highlight-color: color; /*滚动条的高亮颜色(左阴影?)*/
  5. scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
  6. scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
  7. scrollbar-track-color: color; /*立体滚动条背景颜色*/
  8. scrollbar-base-color:color; /*滚动条的基色*/

火狐目前还没有修改滚动条样式的 CSS支持

三.自定义(滑动条)input[type="range"]样式,Internet Explorer 9及更早IE版本并不支持这个控件

<input type="range" value="0">

属性描述
max设置或返回滑块控件的最大值
min设置或返回滑块控件的最小值
step设置或返回每次拖动滑块控件时的递增量
value设置或返回滑块控件的 value 属性值
defaultValue设置或返回滑块控件的默认值
autofocus设置或返回滑块控件在页面加载后是否应自动获取焦点

目前我所能想到的就是如下的两种方案:

  • 直接通过css完成样式改造
  • 将滑动条隐藏(设置opacity: 0),通过自定义div实现

美化滑动控件,需要完成以下的五个步骤:

  • 去除系统默认的样式;
  • 给滑动轨道(track)添加样式;
  • 给滑块(thumb)添加样式;
  • 根据滑块所在位置填充进度条;
  • 实现多浏览器兼容。

在IE 9以上的浏览器中可以使用::-ms-fill-lower 和 ::-ms-fill-upper来自定义进度条;在Firefox浏览器中则可以通过::-moz-range-progress来自定义;而Chrome浏览器中不支持直接设置进度条,而达到填充的效果,所以首先针对Chrome浏览器来实现整个流程。

1.要注意的是对基于 webkit 的浏览器,如Chrome, Safari, Opera等,滑块也要移除默认样式。

input[type=range] {
    -webkit-appearance: none;
    width: 300px;
    border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}    

2.自定义滑动控件的轨道

input[type=range]::-webkit-slider-runnable-track {
    height: 15px;
    border-radius: 10px; /*将轨道设为圆角的*/
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
}

原始的控件获取到焦点时,会显示包裹整个控件的边框,所以还需要把边框取消

input[type=range]:focus {
    outline: none;
}

3.对滑块的样式进行变更

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 25px;
    width: 25px;
    margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
    background: #ffffff; 
    border-radius: 50%; /*外观设置为圆形*/
    border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
    box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}

4.新建一个RangeSlider.js文件,实现对滑动控件属性的设置、事件的监听、以及设置回调函数。监听input事件时,对进度条进行填充。

$.fn.RangeSlider = function(cfg){
    this.sliderCfg = {
        min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null, 
        max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
        step: cfg && Number(cfg.step) ? cfg.step : 1,
        callback: cfg && cfg.callback ? cfg.callback : null
    };

    var $input = $(this);
    var min = this.sliderCfg.min;
    var max = this.sliderCfg.max;
    var step = this.sliderCfg.step;
    var callback = this.sliderCfg.callback;

    $input.attr('min', min)
        .attr('max', max)
        .attr('step', step);

    $input.bind("input", function(e){
        $input.attr('value', this.value);
        $input.css( 'background', 'linear-gradient(to right, #059CFA, white ' + this.value + '%, white)' );

        if ($.isFunction(callback)) {
            callback(this);
        }
    });
};

5.多浏览器的兼容

如果要兼容Firefox浏览器,只需要把上述css代码中的 ::-webkit-slider-runnable-track 替换为 ::-moz-range-track ,就可以完成对轨道的美化了;把css代码中的 ::-webkit-slider-thumb 替换为 ::-moz-range-thumb ,这是对滑块的样式进行改造;而如果是要填充进度条就很简单了,不需要像之前在RangeSlider.js中 $input.css( ‘background’, ‘linear-gradient(to right, #059CFA, white ’ + this.value + ‘%, white)’ ); 这样实现填充,只需要新增如下的css代码即可:

input[type=range]::-moz-range-progress {
    background: linear-gradient(to right, #059CFA, white 100%, white);
    height: 13px;    
    border-radius: 10px;
}

如果要想兼容IE 9以上版本的浏览器,对上述css代码要修改的地方稍微多了一些

input[type=range] {
    -webkit-appearance: none;
    width: 300px;
    border-radius: 10px;
}

input[type=range]::-ms-track {
    height: 25px;
    border-radius: 10px;
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
    border-color: transparent; /*去除原有边框*/
    color: transparent; /*去除轨道内的竖线*/
}

input[type=range]::-ms-thumb {
    border: solid 0.125em rgba(205, 224, 230, 0.5);
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background: #ffffff;
    margin-top: -5px;
    box-shadow: 0 .125em .125em #3b4547;
}

input[type=range]::-ms-fill-lower {
    /*进度条已填充的部分*/
    height: 22px;
    border-radius: 10px;
    background: linear-gradient(to right, #059CFA, white 100%, white);
}

input[type=range]::-ms-fill-upper {
    /*进度条未填充的部分*/
    height: 22px;
    border-radius: 10px;
    background: #ffffff;
}

input[type=range]:focus::-ms-fill-lower {
    background: linear-gradient(to right, #059CFA, white 100%, white);
}

input[type=range]:focus::-ms-fill-upper {
    background: #ffffff;
}

以上就是为了兼容IE 9+完整的css代码,也不是很复杂,同样的和Firefox浏览器一样,它支持直接使用css来自定义进度条,所以原先在RangeSlider.js里的 $input.css( ‘background’, ‘linear-gradient(to right, #059CFA, white ’ + this.value + ‘%, white)’ ); 填充方法就不需要啦。

 

下面提几个IE浏览器需要特别注意的问题:

  1. 在测试时发现,IE浏览器没有加载css文件,导致样式没有发生改变,如果你的使用iE浏览器测试时也存在这样的问题,那么你需要将HTML第一行的 <!DOCTYPE html> 改为 <!DOCTYPE>
  2. 拖动滑块时,IE浏览器没有触发 input 事件,所以只能选择将RangeSlider.js中的监听事件改为 change 事件。

去除默认滑动条

::-webkit-scrollbar{width:0px;height:0px}

参考网址:http://blog.csdn.net/u013347241/article/details/51560290

 

转载于:https://my.oschina.net/ochmdlc/blog/1575184

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值