javascript - 实现滚动锚定时元素“轻微抽搐”

Question

编辑：令人尴尬的是，我最初在 Chrome 上看到了这个问题，但问题是因为我在浏览器上稍微缩小了导致亚像素元素大小。如果元素是全像素高度，则可以正常工作。然而，我相信这仍然是一个问题，因为 Firefox 似乎以不同于 Chrome 的方式呈现亚像素元素，而且我们应该支持缩放。

我正在尝试实现滚动锚定跨浏览器，以便在将新元素附加到溢出容器并且用户向上滚动时，位置不会移动。

我在这里有一个测试代码笔： https ://codepen.io/djdmorrison/pen/YzpwvWx

我将容器限制为包含 50 个元素，每 250 毫秒添加一个新元素，同时删除最旧的元素。当用户在容器中滚动时，我希望元素保持静止。

我通过在添加新元素之前获取container.scrollTopand来做到这一点。container.scrollHeight然后我添加元素，container.scrollHeight再次获取并计算 scrollHeight 的差异（计算添加的新元素和删除的旧元素的高度差异）。然后我将其设置container.scrollTop为前一个scrollTop减去新元素高度（+边距）加上+滚动高度的差异：container.scrollTop = beforeScrollTop - (newEl.offsetHeight + margin) + diffScrollHeight;

这似乎几乎是解决方案，但有一个非常轻微的抽搐，尤其是在 Firefox 上。

我错过了什么？

标签： javascriptcss