bootstrap table 固定table最底部的滚动条到屏幕底部

最新推荐文章于 2023-04-03 21:36:53 发布

侠课

最新推荐文章于 2023-04-03 21:36:53 发布

阅读量6.8k

点赞数 1

分类专栏：前端文章标签： bootstrap table固定滚动条 bootstrap table 固定滚动条到屏幕底部

本文链接：https://blog.csdn.net/xiakekeali/article/details/103391039

版权

前端专栏收录该内容

8 篇文章

订阅专栏

在使用bootstrap表格时，之前想着说直接把外层的div添加滚动，这样也算是实现了效果，但是伤心的是我的表格里面有固定列，如果直接用表格外层的overflow-x: scroll的话滚动时固定列的效果就消失了，所以没有办法，必须得把她本身的表格滚动条固定到屏幕的底部（想放置的位置），
之前的效果，必须拉倒表格最底部才能看到滚动条
必须拉到表格最底部才能看到左右滚动条
实现以后的效果，冻结表格依然有效
把滚动条固定在底部，并且冻结表格的效果依然有效
作为一个小白，经历了好几个思想斗争，终于有了一点思路，就是自己写一个div,然后把表格的宽赋值给它，并且用这个div的滚动条联动table自带的滚动条，通过样式查看，发现table最底部的滚动条在.fixed-table-body这个样式上，所以对他联动，代码如下

body里面

<body>
	<!-- 表格 -->
	<div id="tbaleDiv" class="pre-scrollable"></div>
	<!-- 滚动条 -->
	<div id="scrollDiv">
         <div id="scrollDivTable"></div>
    </div>
</body>

style里面

	/*位置自己定，想在哪里都行*/
    #scrollDiv{
        position: fixed;
        left: 22px;
        bottom: 43px;  
        /*width: 200px;*/
        height: 10px;
        overflow-y: scroll;
        overflow-x: scroll;
        z-index: 3;
    }
    #scrollDivTable{
        height: 10px;  
    }
    
    /*原本的滚动条不显示*/
    .fixed-table-body::-webkit-scrollbar {
        display: none;
    }

js里面

	//生成表格
 	$("#tbaleDiv").html("<table id='tableDetailsDiv' class='table text-nowrap'></table>");
 	.
 	.
 	.(表格的生成内容不详述)
 	.

 	//把原来外层的宽度赋值给新滚动条的外层
    $("#scrollDiv").css('width',$('.fixed-table-body').width()); 
    //把表格的宽度赋值给新滚动条的内层以撑出原本的滚动条的样子
    $("#scrollDivTable").css('width',$('#tableDetailsDiv').width());
    
    // 滚动条联动
    $("#scrollDiv").scroll(function(){
        $(".fixed-table-body").scrollLeft($(this).scrollLeft()); // 横向滚动条
    });