I have a table contained into a div with a visible overflow so the page is scrollable instead of the table. When I scroll into the page, the header successfully sticks to the page but becomes shaky. I have seen this issue many times in the past when the sticky element’s position is updated in Javascript instead of using the “position: fixed” style like in this situation where it’s the “translate3D” that is updated.
Is there a way to fix this?
Yes, but it will create a double scroll (one on the table, and one on the window).
What type of OS and browser do you use?
I asked because in my device (macOS Catalina 10.15.6 and Chrome 84) I don’t have a double scroll bar when I tested this demo -
https://jsfiddle.net/yde0a46s/
As you can see below:
It has been tested on several browser on both macOS and Windows. The shaking is a Javascript performance issue so it can differ between different computers and different browsers. Per example, Firefox is way better to handle this type of JS. You can try the same JS fiddle while updating the values.
The principle is that the JS refresh rate become too slow while handling so many data. That’s why the best way to handle a sticky element is too change its position to “fixed”.
Yes, I understand your point of view.
But in the Handsontable we can’t use position: fixed for header because the container is relatively positioned. So if we use fixed for header the rest of the table doesn’t match.
I beg to differ. I could be done by creating a placeholder behind the header, setting the real header to position: absolute, and switch to fixed when the header reaches the top of the viewport. This way it would work in all situations.
Hi @webadmin
We can’t use this approach because fixed positioned elements are always relative to the document, not any particular parent. A lot of our clients use Handsotanble as a component with the other components in the site.
If I good understand you find a solution for your issue.