问题
EDIT: Embarrassingly, I originally saw this issue on Chrome but the issue was because I was slightly zoomed out on the browser causing subpixel element sizing. If the elements are full pixel heights it works fine. However, I believe this is still an issue as Firefox seems to render sub-pixel elements differently to Chrome and also we should support zooming.
I'm trying to implement scroll-anchoring cross-browser so that when appending a new element to an overflow container and the user is scrolled up, the position won't move.
I have a test codepen here: https://codepen.io/djdmorrison/pen/YzpwvWx
I'm restricting the container to contain 50 elements, adding a new one every 250ms and removing the oldest at the same time. When the user is scrolled mid-way in the container I want the elements to stay still.
I do this by getting the container.scrollTop and container.scrollHeight before the new element is added. I then add the element, take the container.scrollHeight again and work out the difference in the scrollHeight (to work out the difference in heights of the new element added and the old removed). I then set the container.scrollTop to the previous scrollTop minus the new elements height (+ margin) plus + the difference in scroll heights: container.scrollTop = beforeScrollTop - (newEl.offsetHeight + margin) + diffScrollHeight;
This seems to be the solution almost, but there's a very slightly twitching, especially on firefox.
What am I missing?
来源：https://stackoverflow.com/questions/66062867/elements-twitching-slightly-when-implementing-scroll-anchoring