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

littleGrow 发布于2019-08-29 12:40 / 2208人阅读

摘要：同时在里，大概第行，有一些用来计算滚动条宽度的样式。下面是显示效果，分别为有滚动条时候和无滚动条时候。至此，自定义滚动条样式就完成了。

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

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

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

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

.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 #ffffd;
    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 = $("
")
        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自定义滚动条样式就完成了。

GPU云服务器云服务器 java滚动条的事件 js判断滚动条的高度 bootstrap-table table样式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112066.html

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

摘要：同时在里，大概第行，有一些用来计算滚动条宽度的样式。下面是显示效果，分别为有滚动条时候和无滚动条时候。至此，自定义滚动条样式就完成了。 bootstrap table 其方便性与实用性已不言而喻，然，在我们实际应用中总是有这种那种的需求，比如我近期遇到的，就是需要自定义滚动条 = =，不过话说初始滚动条确实有点难看... 现在大多数网站滚动条都还是...

anRui 2019-08-20 17:00 评论0 收藏0
表头固定，表的主体设置滚动条，同时解决错位问题

摘要：项目中遇到的问题，需要表头固定，给表体设置滚动条，搜了很多种方法，也研究了一下。表头放在中，表体放在中，给设置固定高度，加样式，这样在数据多的时候会出现滚动条，数据少的时候滚动条会消失。项目中遇到的问题，需要表头固定，给表体设置滚动条，搜了很多种方法，bootstrap table也研究了一下。下面是我们使用的方法。表头放在div1中，表体放在div2中，给div2设置固定高度，加样式o...

nanchen2251 2019-04-23 13:11 评论0 收藏0
前端面试之路一(HTML+CSS面试整理)

摘要：或表示红色，表示绿色，表示蓝色，也可取其他数值来指定颜色。针对多字节文字，中文句子也是单词允许在单词内换行。一、HTML基础 html常见元素和理解 html常见元素分类 head区元素：（不会在页面上留下直接内容） meta title style link script base body区： div/selection/article/aside/header/f...

hqman 2019-08-02 12:09 评论0 收藏0
前端面试之路一(HTML+CSS面试整理)

摘要：或表示红色，表示绿色，表示蓝色，也可取其他数值来指定颜色。针对多字节文字，中文句子也是单词允许在单词内换行。一、HTML基础 html常见元素和理解 html常见元素分类 head区元素：（不会在页面上留下直接内容） meta title style link script base body区： div/selection/article/aside/header/f...

YacaToy 2019-08-29 17:26 评论0 收藏0
[总结]CSS/CSS3常用样式与web移动端资源

摘要：不允许负值用百分比来定义缩放比例。解决这个很简单，在父元素中使用即可解决该。列宽度由单元格内容设定。定义仅有大写字母。不过，要让任何元素生效还得借助于一点点。 css/css3常用样式 CSS修改选中文字的颜色 html代码：第一段文字选中效果第二段文字选中效果 css代码： .p1::selection{background:red;color:#fff;} .p2::selec...

The question 2019-08-28 17:54 评论0 收藏0