修改bootstrap table 源码实现固定高时自定义滚动条的样式


        bootstrap table 其方便性与实用性已不言而喻,然,在我们实际应用中总是有这种那种的需求,比如我近期遇到的,就是需要自定义滚动条 = =,不过话说初始滚动条确实有点难看…


        现在大多数网站滚动条都还是原始样式,不过在更加追求体验的年代,人们总是要尽可能消除影响整体美观的元素,滚动条便是其中之一。如果能将滚动条设置成符合网站风格的样式,岂不比浏览器默认的更加赏心悦目?


        回归正题,在bootstrap table数据多且又固定高度的时候,就会出现滚动条,往下滚动。此时领导发话了,这个滚动条太宽了,给我调窄一些…颜色也不对,你也调一下!我能怎么办,于是就改呗。在经过一番探索之后,发现在bootstrap table.js的源码里,第100行左右,有个getScrollBarWidth()方法,该方法就是用来获取滚动条宽度。同时在bootstrap table.css里,大概第295行,有一些用来计算滚动条宽度的样式。
        ok,找到问题所在就好办了。首先,我们不用其自带的样式,删除第295行开始到下一个段注释之前的样式。最后像这样——

修改bootstrap table 源码实现固定高时自定义滚动条的样式

       样式已删除,然后我们写自己的滚动条样式,建议写在自己的样式文件里

.calcscrollin {
    width: 100%;
    height: 200px;
}
.calcscrollout{   
    top: 0;
    left: 0;    
    width: 200px;
    height: 150px; 
    overflow: scroll;
}
.calcscrollout::-webkit-scrollbar,.fixed-table-body::-webkit-scrollbar{
    width: 7px;
    height: 7px;
    background: #fff;
}
.calcscrollout::-webkit-scrollbar-track,.fixed-table-body::-webkit-scrollbar-track{
    background: #fff;
    border: 1px solid #ddd;
    margin-right: 4px;
}
.calcscrollout::-webkit-scrollbar-thumb,.fixed-table-body::-webkit-scrollbar-thumb{
    height: 7px;
    border: 1px solid #ccc;
    background-color: #e5e5e5;
}

其中  ::-webkit-scrollbar 代表整个滚动条     ::-webkit-scrollbar-track 表示滚动条轨道    ::-webkit-scrollbar-thumb代表轨道上的小方块,不过,看到-webkit-应该就知道了,咳咳,IE不支持,不过我没测,各位可以自行测试。calcscrollin 和calcscrollout又是干什么的呢?没错,就是用来计算滚动条宽度的,现在,我们回到其源码的第100行,修改这个方法,如下所示:

var getScrollBarWidth = function () {
      if (cachedWidth === null) {
        var outer = $('<div  class="calcscrollout"><p class="calcscrollin"><p/><div/>')
        var w1, w2;
        $('body').append(outer);
        w1 = $('.calcscrollout')[0].offsetWidth;
        w2 = $('.calcscrollin')[0].offsetWidth;                        
        if (w1 === w2) {
            w2 = $('.calcscrollin')[0].clientWidth;
        }
        outer.remove();
        cachedWidth = w1-w2;
      }
      return cachedWidth;
    };

      这个方法其实很简单,无非就是在body里最后加两个元素,一个out,一个in(还记得样式上的calcscrollout和calcscrollin吗?),获取他们的offsetWidth——可见宽度,用外面的减去里面的,剩余就是滚动条宽度,最后将两元素删除,返回cacheWidth即滚动条宽度。 下面是显示效果,分别为有滚动条时候和无滚动条时候。至此,bootstrap table自定义滚动条样式就完成了。

修改bootstrap table 源码实现固定高时自定义滚动条的样式        修改bootstrap table 源码实现固定高时自定义滚动条的样式


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>