固定标头滚动表 - 如何使用页面加载上的CSS jQuery保留水平滚动位置

Question

我有一个带有水平和垂直滚动条的固定标头滚动表页面。

使用以下内线CSS我从php中从php中获得的 scrollAmount从隐藏的输入中获得，该输入的值来自jQuery代码，并将其输入到Inline CSS

中

style="transform:translateX(<negative offset value of scrollAmount>)"

我的问题是，我如何使用CSS和jQuery正确地维护滚动滚动位置，该表与水平滚动条溢出，而无需等待页面完全加载/完成渲染？

>

内联样式

transform:translateX(-<?=scrollAmount()?>px)

jQuery滚动位置功能

function setScroll(id_header, id_table)
        {
             $('div.'+id_table).on("scroll", function(){  //activate when #center scrolls
                    var left = $('div.'+ id_table).scrollLeft();  //save #center position to var left
                   $('div.'+id_header).scrollLeft(left);        //set #top to var left
                   $('#scrollamount').val(left);
                });

隐藏的输入html代码

<input type="hidden" id="scrollamount" name="scrollamount" value=<?=scrollAmount()?>"/>

PHP代码

 function scrollAmount()
    {
        if (isset($_POST['scrollamount']))
            return $_POST['scrollamount'];
        return "";
    }

Answer 1

问题是.scrollLeft()每次滚动时都会更改，因此您只需将其设置为滚动的位置即可。您可能可以使用jQuery找到表的位置，在开始时将其设置为通用变量，然后随后使用$('div.'+id_header).scrollLeft(globalLeftPosition)将其设置为设置。希望这会有所帮助。

Answer 2

使用以下代码，我能够产生一种可视觉上可接受的解决方案，该解决方案可以将表保持在用户的滚动金额中。

JS代码 - 在Table完成/加载

时在document.ready（）上执行

//Translate 0px, undoing the original translation       
$('table#'+ id_table).attr("style", "transform:translateX(0px)");   
$('table#'+ id_header).attr("style", "transform:translateX(0px)");  
//Scroll left to the desired amount as defined in the hidden input `#scrollamount` 
$('div.'+ id_table).scrollLeft($('#scrollamount').val());
$('div.'+ id_header).scrollLeft($('#scrollamount').val());

html/php代码 - 固定标头滚动表（标题和桌子主体）

<div class="summary_header">
<table id="summary_header" border=1 style="transform:translateX(-<?=scrollAmount()?>px)">
    ... <-----Table Header Definition
</table>
</div>
<div class="summary_table" style="overflow-x:scroll">     
<table id="summary_table" style="transform:translateX(-<?=scrollAmount()?>px)">
    ... <--Table Body Definition
</table>
</div>