Sticky elements help users keep a sense of perspective when scrolling through long lists.
https://ppiyush13.github.io/sticky-table/
- An overflowing table of columns and rows with headings sticking to the top on scroll of window.
- Smooth scrollable header and body.
- Horizontally scrollable table with any number of column(s) sticking to the side of the container.
- Huge data without lag.
Try on your machine by first installing all the dependencies
npm installand then start local server
npm startWhen working with overflows, sticky element doesn't appear so sticky after all. The browser doesn’t seem to be respecting position: sticky; once we add overflow to the mix.
The issue with overflows is…
that a sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn’t the nearest actually scrolling ancestor. This effectively inhibits any “sticky” behavior. (From MDN Web Docs)
-
Add a fixed height
- Adding fixed height to the scrolling container will solve the problem.
- This is not what we want since it degrades user experience as table occupies only fixed(limited) part of the viewport.
-
Sync scrolling of header and body
- Another approach is to make table header and body scroll vertically in their own separate containers and sync their scrolling when the counterpart scrolls.
- This solution works fine in desktop browser, but scrolling behavior is not smooth on mobile devices.
-
Suggested solution
- Enhancing second approach further, we will disable native browser scrolling on both the header and body containers.
- We will use
iScrollto create virtual scroller. - Then sync the scrolling of header and body on the scroll of iScroll virtual scroller.
react-virtuosois used to make table scroll on window scrolling and virtualize table records to render huge data smoothly.
MIT © Piyush Lodaya