修改bootstrap table 源碼實現固定高時自定義滾動條的樣式

        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 #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自定義滾動條樣式就完成了。