How to keep scroll position in table on page refresh

JavaScript
1

I am using the following to display a table with horizontal and vertical scroll bars along with the top row and first column being frozen

The table is inside a div and that div gets refreshed every few seconds. After the refresh, both scroll bars do not stay at the position they were in last. Is there any way to keep these scroll bars after a div refresh?

<style>
.vertical {
    writing-mode: vertical-rl;
	transform:rotate(-180deg);
	padding:6px 6px 10px 6px;
	margin: 0 auto;
}

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.intro {
  max-width: 1280px;
  margin: 1em auto;
}
#table_grid {
  position: relative;
  width:100%;
  z-index: 1;
  margin: auto;
  overflow: auto;
  height: 500px;
}
#table_grid table {
  width: 100%;
  min-width: 500px;
  margin: auto;
  border-collapse: collapse;
  border-spacing: 0;
}
#table-wrap {
  position: relative;
}
#table_grid th,
#table_grid td {
  padding: 5px 10px;
  background: #fff;
  vertical-align: top;
}

#table_grid thead th {
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #f8f8f8;
  
}
/* safari and ios need the tfoot itself to be position:sticky also */
#table_grid tfoot,
#table_grid tfoot th,
#table_grid tfoot td {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  color: #fff;
  z-index:4;
}

th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
}
thead th:first-child,
tfoot th:first-child {
  z-index: 5;
}

/*Highlight rows*/
#table_grid tr:hover,
#table_grid tr:hover td {
  background-color: rgba(220, 220, 220, 0.5);
}
/*Highlight rows including header
#table_grid tr:hover th,
#table_grid tr:hover td {
  background-color: rgba(220, 220, 220, 0.5);
}
*/

#table_grid tr:hover th:hover,
#table_grid tr:hover td:hover {
  background: #f0f0f0;
}

#table_grid col {
  background: #f8f8f8;
}
#table_grid col.hover {
  background: #ccc;
}
#table_grid th.hover {
  background: #ffffff;
}

#table_grid tr:first-child th:first-child { border-top-left-radius: 10px; }
#table_grid tr:first-child th:last-child { border-top-right-radius: 10px; }

#table_grid tr:nth-child(-n+4) .tooltip_pairing_frozen_column_right {
  top:0;
  bottom:auto;
} 
#table_grid table tr .tooltip_pairing_frozen_column_right {
  top:auto;
  bottom:0;
} 
#table_grid  th:hover{z-index:3;}
</style>
2

Are you using Ajax to do the refreshing?

Could you use JavaScript to update the innerHTML of each cell instead of refreshing the table? I guess that would not affect the scroll positions.

1 Like
3

If you can’t do what @Archibald suggests then you could save the scroll position of the div and then when you refresh set the scroll position back.

This is just a bare bones example without the setting part (as JS is not my thing).

If you save the values of scrollTop and scrollLeft then you can use them to set the scroll position of the div after you have refreshed.

I’ll move the thread to the JS forum as there is nothing for CSS here :slight_smile:

4

Are you using Ajax to do the refreshing?

Yes I am using AJAX to refresh the table every 5s

Could you use JavaScript to update the innerHTML of each cell instead of refreshing the table? I guess that would not affect the scroll positions.

How would I do that? I am not too proficient in JS.

I tried the suggestion from PaulOB and that works but I see a small flicker of the scrollbars to jumps from position 0 to the actual position. I would like to try your method if I can to see if that flicker disapears.

5

This CodePen demonstrates how to update the text in a cell:

The ‘rows’ property of a table returns a collection of rows and the ‘cells’ property of a row returns a collection of cells in a row.

I have not checked to see if that keeps the scrollbars unchanged but it should be noted that changing the text in cells often changes the width of columns unless you use CSS to specify fixed column widths.

EDIT: You will need to extract the text for each cell from the HTML you receive via Ajax.

1 Like
6

Thanks. I will check this out

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.