How to fix position while refreshing the web page inside a scrolling table?

user_16861449 0
Viewed 100

I just found this tutorial : https://www.geeksforgeeks.org/how-to-create-a-table-with-fixed-header-and-scrollable-body/ It works perfectly for me but I need to refresh the web page and be in the same row as before in the table (for example a table with 10 000 rows, i need to stay at the 600th row after resfreshing the web page). I just add :

<script>
    document.addEventListener("DOMContentLoaded", function(event) { 
        var scrollpos = localStorage.getItem('scrollpos');
        if (scrollpos) window.scrollTo(0, scrollpos);
    });

    window.onbeforeunload = function(e) {
        localStorage.setItem('scrollpos', window.scrollY);
    };
</script>

But it doesn't work because I stay on a web page fixed and i'm scrolling inside it. it's because my scrolling vertical bar is contained in the table and not in the web page.

How can I reload ly web page keeping the position of my vertical scroll bar ?

<!DOCTYPE html>

<html lang="en">

<head>
</head>

<body>
    
<!---Without refresh Dispositif-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>

document.addEventListener("DOMContentLoaded", function(event) { 
    var scrollpos = localStorage.getItem('scrollpos');
    if (scrollpos) window.scrollTo(0, scrollpos);
});
window.onbeforeunload = function(e) {
    localStorage.setItem('scrollpos', window.scrollY);
};
    
</script>

<style>

.fixTableHead {
      overflow-y: auto;
      height: 600px;
    }
    .fixTableHead thead th {
      position: sticky;
      top: 0;
    }
    table {
      border-collapse: collapse;        
      width: 100%;
    }
    th,
    td {
      padding: 8px 15px;
      border: 2px solid #529432;
    }
    th {
      background: #ABDD93;
    }
    
</style>

 
<div class="fixTableHead">

    <table class="table table-striped header-fixed" id="tableau">

        <thead>
            <tr>

                <th>A</th>
                <th>B</th>
                <th>C</th>

            </tr> 
        </thead>


        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            
            <tr>
                <td>10</td>
                <td>11</td>
                <td>12</td>
            </tr>
            
            <tr>
                <td>13</td>
                <td>14</td>
                <td>15</td>
            </tr>
        </tbody>

    </table>

</div>

</body>

</html>

Thank you

css html php javascript
2 Answers

The solution is to replace window.scrollY with your table's scrollTop and also, instead of scrolling the window to the scroll position, you should set scrollTop on the table element.

In your markup, the scroll happens inside the .fixTableHead element, which is the <table>'s wrapper.

Therefore, the following should work:

document.addEventListener("DOMContentLoaded", function(event) {
  const scrollpos = localStorage.getItem('scrollpos');
  if (scrollpos) {
    const scroller = document.querySelector('.fixTableHead');
    if (scroller) {
        scroller.scrollTop = scrollpos;
    }
  }
});

window.onbeforeunload = function(e) {
  const scroller = document.querySelector('.fixTableHead');
  localStorage.setItem('scrollpos', scroller ? scroller.scrollTop : 0 );
};

See it working here.
Scroll down and the press Run button again. You should see the app re-rendering at the same position.

Note: unfortunately, this can't be demo-ed in a SO snippet, as SO blocks access to localStorage from its snippets.

Since you seem to use jQuery, here's a jQuery version of the same script:

(function($){
  const selector = '.fixTableHead';
  if ($(selector).length) {
    const el = $(selector).eq(0)[0];
    el.scrollTop = localStorage.getItem('scrollpos');
    window.onbeforeunload = () => {
      localStorage.setItem('scrollpos', el.scrollTop);
    }
  }
})(jQuery);

Note: you should run the script after the scroller element has been added to the page, or it won't work.

user_18916770 
document.addEventListener("DOMContentLoaded", function(event) {
  const scrollpos = localStorage.getItem('scrollpos');
  if (scrollpos) {
    const scroller = document.querySelector('.fixTableHead');
    if (scroller) {
        scroller.scrollTop = scrollpos;
    }
  }
});

window.onbeforeunload = function(e) {
  const scroller = document.querySelector('.fixTableHead');
  localStorage.setItem('scrollpos', scroller ? scroller.scrollTop : 0 );
};
user_170953870
Related