Fixed Header Scrollbare Tabelle - Wie horizontale Bildlaufposition mit css jquery auf Seite Lasten zu speichern

Question

Ich habe eine feste Kopfzeile Scroll-Tabelle mit horizontalen und vertikalen Bildlaufleisten, für die ich derzeit auf jeder Spalte sortieren kann, kann aber nicht richtig beibehalten horizontale Position des Tisches beim Laden der Seite.

Unter Verwendung der folgenden Inline-CSS-I scrollAmount von PHP aus einem versteckten Eingang, dessen Wert von einem Jquery-Code und geben Sie ihn in die Inline-CSS

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

Meine Frage erhalten ist, wie kann ich Scrollposition richtig halten für eine Tabelle, die mit einer horizontalen Bildlaufleiste mit CSS und jQuery überläuft, ohne darauf zu warten, dass die Seite vollständig geladen/beendet wird?

Inline-Stil

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

jQuery Scroll Position Funktion

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); 
       }); 

Verdeckte Eingabe HTML-Code

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

PHP-Code

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

Answer 1

Mit dem folgenden Code konnte ich eine visuell akzeptable Lösung erstellen, die die Tabelle horizontal um den gescrollten Betrag des Benutzers versetzt.

JS-Code - Führt auf document.ready(), wenn Tabelle hat das Abrufen/Laden

//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-Code beendet - Feste Kopf Scrolling Tabelle (Header und Tabelle Body)

<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> 

Answer 2

Das Problem ist, dass .scrollLeft() wird jedes Mal, wenn Sie blättern ändern, so dass Sie sie einfach zu Einstellung, wo es gescrollt wird. Sie könnten wahrscheinlich die Position der Tabelle with jQuery finden, diese am Anfang auf eine universelle Variable setzen und dann später $('div.'+id_header).scrollLeft(globalLeftPosition) verwenden, um sie zu setzen. Hoffe das hilft.