资讯专栏INFORMATION COLUMN

修改bootstrap table 源码实现固定高时自定义滚动条的样式

littleGrow / 2369人阅读

摘要:同时在里,大概第行,有一些用来计算滚动条宽度的样式。下面是显示效果,分别为有滚动条时候和无滚动条时候。至此,自定义滚动条样式就完成了。

</>复制代码

  1.         bootstrap table 其方便性与实用性已不言而喻,然,在我们实际应用中总是有这种那种的需求,比如我近期遇到的,就是需要自定义滚动条 = =,不过话说初始滚动条确实有点难看...

</>复制代码

  1.         现在大多数网站滚动条都还是原始样式,不过在更加追求体验的年代,人们总是要尽可能消除影响整体美观的元素,滚动条便是其中之一。如果能将滚动条设置成符合网站风格的样式,岂不比浏览器默认的更加赏心悦目?

</>复制代码

  1.         回归正题,在bootstrap table数据多且又固定高度的时候,就会出现滚动条,往下滚动。此时领导发话了,这个滚动条太宽了,给我调窄一些...颜色也不对,你也调一下!我能怎么办,于是就改呗。在经过一番探索之后,发现在bootstrap table.js的源码里,第100行左右,有个getScrollBarWidth()方法,该方法就是用来获取滚动条宽度。同时在bootstrap table.css里,大概第295行,有一些用来计算滚动条宽度的样式。
            ok,找到问题所在就好办了。首先,我们不用其自带的样式,删除第295行开始到下一个段注释之前的样式。最后像这样——

</>复制代码

  1.        样式已删除,然后我们写自己的滚动条样式,建议写在自己的样式文件里

</>复制代码

  1. .calcscrollin {
  2. width: 100%;
  3. height: 200px;
  4. }
  5. .calcscrollout{
  6. top: 0;
  7. left: 0;
  8. width: 200px;
  9. height: 150px;
  10. overflow: scroll;
  11. }
  12. .calcscrollout::-webkit-scrollbar,.fixed-table-body::-webkit-scrollbar{
  13. width: 7px;
  14. height: 7px;
  15. background: #fff;
  16. }
  17. .calcscrollout::-webkit-scrollbar-track,.fixed-table-body::-webkit-scrollbar-track{
  18. background: #fff;
  19. border: 1px solid #ffffd;
  20. margin-right: 4px;
  21. }
  22. .calcscrollout::-webkit-scrollbar-thumb,.fixed-table-body::-webkit-scrollbar-thumb{
  23. height: 7px;
  24. border: 1px solid #ccc;
  25. background-color: #e5e5e5;
  26. }

</>复制代码

  1. 其中  ::-webkit-scrollbar 代表整个滚动条     ::-webkit-scrollbar-track 表示滚动条轨道    ::-webkit-scrollbar-thumb代表轨道上的小方块,不过,看到-webkit-应该就知道了,咳咳,IE不支持,不过我没测,各位可以自行测试。calcscrollin 和calcscrollout又是干什么的呢?没错,就是用来计算滚动条宽度的,现在,我们回到其源码的第100行,修改这个方法,如下所示:

</>复制代码

  1. var getScrollBarWidth = function () {
  2. if (cachedWidth === null) {
  3. var outer = $("

    ")
  4. var w1, w2;
  5. $("body").append(outer);
  6. w1 = $(".calcscrollout")[0].offsetWidth;
  7. w2 = $(".calcscrollin")[0].offsetWidth;
  8. if (w1 === w2) {
  9. w2 = $(".calcscrollin")[0].clientWidth;
  10. }
  11. outer.remove();
  12. cachedWidth = w1-w2;
  13. }
  14. return cachedWidth;
  15. };

</>复制代码

  1.       这个方法其实很简单,无非就是在body里最后加两个元素,一个out,一个in(还记得样式上的calcscrollout和calcscrollin吗?),获取他们的offsetWidth——可见宽度,用外面的减去里面的,剩余就是滚动条宽度,最后将两元素删除,返回cacheWidth即滚动条宽度。 下面是显示效果,分别为有滚动条时候和无滚动条时候。至此,bootstrap table自定义滚动条样式就完成了。

      

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112066.html

相关文章

  • 修改bootstrap table 源码实现固定时自定义滚动条的样式

    摘要:同时在里,大概第行,有一些用来计算滚动条宽度的样式。下面是显示效果,分别为有滚动条时候和无滚动条时候。至此,自定义滚动条样式就完成了。         bootstrap table 其方便性与实用性已不言而喻,然,在我们实际应用中总是有这种那种的需求,比如我近期遇到的,就是需要自定义滚动条 = =,不过话说初始滚动条确实有点难看...         现在大多数网站滚动条都还是...

    anRui 评论0 收藏0
  • 表头固定,表的主体设置滚动条,同时解决错位问题

    摘要:项目中遇到的问题,需要表头固定,给表体设置滚动条,搜了很多种方法,也研究了一下。表头放在中,表体放在中,给设置固定高度,加样式,这样在数据多的时候会出现滚动条,数据少的时候滚动条会消失。项目中遇到的问题,需要表头固定,给表体设置滚动条,搜了很多种方法,bootstrap table也研究了一下。 下面是我们使用的方法。 表头放在div1中,表体放在div2中,给div2设置固定高度,加样式o...

    nanchen2251 评论0 收藏0
  • 前端面试之路一(HTML+CSS面试整理)

    摘要:或表示红色,表示绿色,表示蓝色,也可取其他数值来指定颜色。针对多字节文字,中文句子也是单词允许在单词内换行。 一、HTML基础 html常见元素和理解 html常见元素分类 head区元素:(不会在页面上留下直接内容) meta title style link script base body区: div/selection/article/aside/header/f...

    hqman 评论0 收藏0
  • 前端面试之路一(HTML+CSS面试整理)

    摘要:或表示红色,表示绿色,表示蓝色,也可取其他数值来指定颜色。针对多字节文字,中文句子也是单词允许在单词内换行。 一、HTML基础 html常见元素和理解 html常见元素分类 head区元素:(不会在页面上留下直接内容) meta title style link script base body区: div/selection/article/aside/header/f...

    YacaToy 评论0 收藏0
  • [总结]CSS/CSS3常用样式与web移动端资源

    摘要:不允许负值用百分比来定义缩放比例。解决这个很简单,在父元素中使用即可解决该。列宽度由单元格内容设定。定义仅有大写字母。不过,要让任何元素生效还得借助于一点点。 css/css3常用样式 CSS修改选中文字的颜色 html代码: 第一段文字选中效果 第二段文字选中效果 css代码: .p1::selection{background:red;color:#fff;} .p2::selec...

    The question 评论0 收藏0

发表评论

0条评论

littleGrow

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<