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

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

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

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

所以

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

<div class="bottomScroll">
 
      <table id="dataList" ></table>
 
</div>
           

第二步:写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

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值