修改bootstraptable源码实现固定高度自定义滚动条的样式最近遇到的是需要自定义滚动条==，但是初始的滚动条真的很难看。。。现在大部分的网站滚动条都还是原来的样式，但是在更加追求体验的时代，人们总是想尽最大努力剔除影响整体美观的元素，滚动条就是其中之一。如果能把滚动条设置成和网站的风格相匹配，岂不是比浏览器默认的更顺眼？回到正题，当bootstrap表的数据很多，高度固定的时候，会出现一个滚动条，向下滚动。这时，领导发话了，这个滚动条太宽了，请把它调窄一点……颜色不对，你也调整一下吧！我能怎么办，所以我会改变它。经过一番摸索，发现在bootstraptable.js的源码中，在100行附近，有一个getScrollBarWidth()方法，用于获取滚动条的宽度。同样在bootstraptable.css中，295行附近，有一些样式是用来计算滚动条的宽度的。好的，很容易找到问题。首先，我们不使用它自己的样式，将第295行到下一段注释的样式删除。最后是这样的——样式已经删除了，然后我们写自己的滚动条样式，建议写在自己的样式文件中。calcscrollin{width:100%;高度：200px;}.calcscrollout{顶部：0;左：0；宽度：200px；高度：150px；溢出：滚动；}.calcscrollout::-webkit-scrollbar,.fixed-table-body::-webkit-scrollbar{宽度：7px;高度：7px；背景：#fff;}。calcscrollout::-webkit-scrollbar-track,.fixed-table-body::-webkit-scrollbar-track{背景：#fff;边框：1px实心#ddd；margin-right:4px;}.calcscrollout::-webkit-scrollbar-thumb,.fixed-table-body::-webkit-scrollbar-thumb{height:7px;边框：1px实心#ccc；background-color:#e5e5e5;}其中::-webkit-scrollbar代表整个滚动条::-webkit-scrollbar-track代表滚动条轨道::-webkit-scrollbar-thumb代表轨道上的小方块，但是你看到-webkit-应该就知道了，咳咳，IE不支持，不过我没有测试，大家可以自己测试。calcscrollin和calcscrollout有什么作用？没错，就是用来计算滚动条的宽度的。现在，让我们回到它的源代码的第100行，修改这个方法如下：pclass="calcscrollin">
')varw1,w2;$('body').append(outer);w1=$('.calcscrollout')[0].offsetWidth;w2=$('.calcscrollin')[0].offsetWidth;if(w1===w2){w2=$('.calcscrollin')[0].clientWidth;}outer.remove();缓存宽度=w1-w2；}返回缓存宽度；};这个方法其实很简单，无非就是在body的末尾添加两个元素，一个out，一个in（还记得calcscrollout和calcscrollin吗？），得到他们的offsetWidth——可见宽度，从外面减去里面，remaining是滚动条的宽度。最后删除这两个元素，返回cacheWidth，也就是滚动条的宽度。下面分别是有滚动条和没有滚动条时的显示效果。至此，bootstraptable自定义滚动条样式就完成了。