2023年6月20日发(作者：)

修改bootstraptable源码实现固定⾼时⾃定义滚动条的样式 bootstrap table 其⽅便性与实⽤性已不⾔⽽喻，然，在我们实际应⽤中总是有这种那种的需求，⽐如我近期遇到的，就是需要⾃定义滚动条 = =，不过话说初始滚动条确实有点难看... 现在⼤多数⽹站滚动条都还是原始样式，不过在更加追求体验的年代，⼈们总是要尽可能消除影响整体美观的元素，滚动条便是其中之⼀。如果能将滚动条设置成符合⽹站风格的样式，岂不⽐浏览器默认的更加赏⼼悦⽬？ 回归正题，在bootstrap table数据多且⼜固定⾼度的时候，就会出现滚动条，往下滚动。此时领导发话了，这个滚动条太宽了，给我调窄⼀些...颜⾊也不对，你也调⼀下！我能怎么办，于是就改呗。在经过⼀番探索之后，发现在bootstrap 的源码⾥，第100⾏左右，有个getScrollBarWidth()⽅法，该⽅法就是⽤来获取滚动条宽度。同时在bootstrap ⾥，⼤概第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 #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 = $('

') var w1, w2; $('body').append(outer); w1 = $('.calcscrollout')[0].offsetWidth; w2 = $('.calcscrollin')[0].offsetWidth;

if (w1 === w2) { w2 = $('.calcscrollin')[0].clientWidth; } (); cachedWidth = w1-w2; } return cachedWidth; }; 这个⽅法其实很简单，⽆⾮就是在body⾥最后加两个元素，⼀个out，⼀个in(还记得样式上的calcscrollout和calcscrollin吗？)，获取他们的offsetWidth——可见宽度，⽤外⾯的减去⾥⾯的，剩余就是滚动条宽度，最后将两元素删除，返回cacheWidth即滚动条宽度。 下⾯是显⽰效果，分别为有滚动条时候和⽆滚动条时候。⾄此，bootstrap table⾃定义滚动条样式就完成了。

2023年6月20日发(作者：)

修改bootstraptable源码实现固定⾼时⾃定义滚动条的样式 bootstrap table 其⽅便性与实⽤性已不⾔⽽喻，然，在我们实际应⽤中总是有这种那种的需求，⽐如我近期遇到的，就是需要⾃定义滚动条 = =，不过话说初始滚动条确实有点难看... 现在⼤多数⽹站滚动条都还是原始样式，不过在更加追求体验的年代，⼈们总是要尽可能消除影响整体美观的元素，滚动条便是其中之⼀。如果能将滚动条设置成符合⽹站风格的样式，岂不⽐浏览器默认的更加赏⼼悦⽬？ 回归正题，在bootstrap table数据多且⼜固定⾼度的时候，就会出现滚动条，往下滚动。此时领导发话了，这个滚动条太宽了，给我调窄⼀些...颜⾊也不对，你也调⼀下！我能怎么办，于是就改呗。在经过⼀番探索之后，发现在bootstrap 的源码⾥，第100⾏左右，有个getScrollBarWidth()⽅法，该⽅法就是⽤来获取滚动条宽度。同时在bootstrap ⾥，⼤概第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 #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 = $('

') var w1, w2; $('body').append(outer); w1 = $('.calcscrollout')[0].offsetWidth; w2 = $('.calcscrollin')[0].offsetWidth;

if (w1 === w2) { w2 = $('.calcscrollin')[0].clientWidth; } (); cachedWidth = w1-w2; } return cachedWidth; }; 这个⽅法其实很简单，⽆⾮就是在body⾥最后加两个元素，⼀个out，⼀个in(还记得样式上的calcscrollout和calcscrollin吗？)，获取他们的offsetWidth——可见宽度，⽤外⾯的减去⾥⾯的，剩余就是滚动条宽度，最后将两元素删除，返回cacheWidth即滚动条宽度。 下⾯是显⽰效果，分别为有滚动条时候和⽆滚动条时候。⾄此，bootstrap table⾃定义滚动条样式就完成了。