ladukaraniket
commented
5 months ago Common approaches to make a scrollbar sticky and the issues associated with them can be found here - https://github.com/informatics-isi-edu/chaise/issues/2101
For a generic solution, a combined approach including the usage of IntersectionObserver and the solutions mentioned in https://github.com/informatics-isi-edu/chaise/issues/2101 needs to be taken.
We wrap the table in two elements to identify the start and end of the table and observe them to determine if the table is fully / partially visible on the screen.
This information can be used to set the position of the scrollbar using the position: "sticky" and top: "__px" css properties.
Known issues -
- The updates based on the IntersectionObserver events may not always reflect immediately.
- Making the header sticky using the same properties causes the table columns to shrink and be misaligned with the header.
jrchudy
We would like to make the horizontal scrollbar that we're displaying above the table to be sticky.
If we only want this on the recordset page, we can follow what we did for the recordedit page. But if we want this to work on all the recordset table instances, we probably need to develop a new solution.
P.S. On the AngularJS version of recordset page we tried making the whole table header sticky, but given the issues we faced, we didn't merge the changes. The approaches we tried and could try with React are documented in #2101.