修改bootstrap table 源碼實(shí)現(xiàn)固定高時自定義滾動條的樣式

anRui 發(fā)布于2019-08-20 17:00 / 948人閱讀

摘要：同時在里，大概第行，有一些用來計(jì)算滾動條寬度的樣式。下面是顯示效果，分別為有滾動條時候和無滾動條時候。至此，自定義滾動條樣式就完成了。

????????bootstrap table 其方便性與實(shí)用性已不言而喻，然，在我們實(shí)際應(yīng)用中總是有這種那種的需求，比如我近期遇到的，就是需要自定義滾動條   = =，不過話說初始滾動條確實(shí)有點(diǎn)難看...

????????現(xiàn)在大多數(shù)網(wǎng)站滾動條都還是原始樣式，不過在更加追求體驗(yàn)的年代，人們總是要盡可能消除影響整體美觀的元素，滾動條便是其中之一。如果能將滾動條設(shè)置成符合網(wǎng)站風(fēng)格的樣式，豈不比瀏覽器默認(rèn)的更加賞心悅目？

????????回歸正題，在bootstrap table數(shù)據(jù)多且又固定高度的時候，就會出現(xiàn)滾動條，往下滾動。此時領(lǐng)導(dǎo)發(fā)話了，這個滾動條太寬了，給我調(diào)窄一些...顏色也不對，你也調(diào)一下！我能怎么辦，于是就改唄。在經(jīng)過一番探索之后，發(fā)現(xiàn)在bootstrap table.js的源碼里，第100行左右，有個getScrollBarWidth()方法，該方法就是用來獲取滾動條寬度。同時在bootstrap table.css里，大概第295行，有一些用來計(jì)算滾動條寬度的樣式。
????????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-應(yīng)該就知道了，咳咳，IE不支持，不過我沒測，各位可以自行測試。calcscrollin 和calcscrollout又是干什么的呢？沒錯，就是用來計(jì)算滾動條寬度的，現(xiàn)在，我們回到其源碼的第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;
    };

??????這個方法其實(shí)很簡單，無非就是在body里最后加兩個元素，一個out，一個in(還記得樣式上的calcscrollout和calcscrollin嗎？)，獲取他們的offsetWidth——可見寬度，用外面的減去里面的，剩余就是滾動條寬度，最后將兩元素刪除，返回cacheWidth即滾動條寬度。下面是顯示效果，分別為有滾動條時候和無滾動條時候。至此，bootstrap table自定義滾動條樣式就完成了。

??????