bootstrap-table 设置滚动条一直在屏幕底部

叁歲伎倆 2023-02-17 02:14 7阅读 0赞

问题描述：  
由于有的table中的列比较多，那么table可能就会出现横向滚动条，但是table本身的滚动条是在table的底部 的，这就导致每次想看一条数据的后面几列的时候，需要鼠标先往下滑动，找到横向滚动条，然后再向右滑动，然后还得可能再往上滑动，找到想看的那条数据的后面几列，这种方式非常惹恼用户，所以需要解决。

解决办法：  
如下图，我们需要的是要让滚动条一直显示在屏幕的最下边，无论你的table多高。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmduaWNleWFuZ3lhbmc_size_16_color_FFFFFF_t_70][]

我们可以使用div 的横向滚动条。 要想滚动条出现在屏幕底布的话，肯定需要div里面包含的table标签的宽度大于div本身的宽度，这样才能出现滚动条。

所以

第一步：在table标签外面加一个div 添加 class

第二步：写js中写如下代码，将屏幕的宽高设置给div，即可解决问题

function setScroll()\{  
var height=parseInt($(window).height())+"px";  
var width=parseInt($(window).width())+"px";  
  
$(".bottomScroll").css(\{"height":height,  
"width":width,  
'overflow-y': 'scroll',  
'overflow-x': 'scroll',  
'display': 'inline-grid'\});  
\}  
优化：  
上面设置完了以后，已经可以实现滚动条出现在屏幕底部了。但是我发现当浏览器宽高改变后，滚动条不能自适应。

所以还需要再浏览器大小改变的时候，再去执行下面的代码即可

$(window).resize(function () \{  
setScroll();  
\});  
  
原文链接：https://blog.csdn.net/yangniceyangyang/article/details/103278626

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmduaWNleWFuZ3lhbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191127165523900.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmduaWNleWFuZ3lhbmc=,size_16,color_FFFFFF,t_70