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

littleGrow 發布于2019-08-29 12:40 / 2307人閱讀

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

????????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樣式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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