出现空滚动条，没有溢出

Question

我想知道是否有一种干净的方法来“重置”滚动条。

在下面的系列图片中，您可以看到相同大小的正文和 HTML 之间的差异，因为有滚动条和没有滚动条。

有趣的是，最终图像中没有滚动条，只有滚动条滚动的区域存在。

我不想将 max-height 属性设置为 599px 以避免溢出。我正在寻找任何见过此错误并知道重置滚动条区域的好方法的人。

1.第一张图片是将 chrome 扩展扩展到其最大 600 像素高度。

2.第二张图片正在扩展表格以溢出 600 像素的高度，从而产生一个滚动条。

3.第三张图片是折叠表格并将显示恢复到原来的 600px 高度；但是，现在存在一个空的“滚动字段”？

Answer 1

使用 requestAnimationFrame — 更新

通过使用 requestAnimationFrame()，滚动条在 DOM 重绘时刷新：

function scrollRefresh(element) {
    // initial overflow attribute
    element.style.overflow = "auto";
    requestAnimationFrame(() => {
        // final overflow attribute
        element.style.overflow = "overlay";
    });
}

使用 requestAnimationFrame 的一个好处是滚动条永远不会改变用户；相反，DOM 会无缝地重新绘制它。这种方法比 setTimeout() 替代方法更加流畅和高效。

---

---

使用 setTimeout

强制 DOM 刷新滚动条的函数将起作用：

function scrollRefresh(element) {
    // initial overflow attribute
    element.style.overflow = "auto";
    setTimeout(() => {
        // final overflow attribute
        element.style.overflow = "overlay";
    }, 17); // 17 ms timeout
}

此解决方案中有两点值得注意：

1. 溢出切换必须包含 auto 溢出属性。以 auto 或 overlay 开头无关紧要；但是，最终的溢出属性必须与初始的不同。
2. 超时与成功成正比。 0 ms 的超时不起作用，而 5 ms 的超时将工作在 30% 左右。 20 ms 的超时对我来说一直有效。

我认为超时与 DOM 刷新率有关。从快速 search 开始，它大约是 60 fps（或 16.6̅ ms），因此 20 ms 已绰绰有余。 17 ms 的超时应该刷新足够慢，以便 DOM 始终呈现溢出更改。

---

---

这是函数工作的demonstration：

我要感谢@lastr2d2 的评论，因为它帮助我找到了解决方案。