html - 出现空滚动条，没有溢出

Question

我想知道是否有一种干净的方法来“重置”滚动条。
在下面的一系列图像中，您可以看到相同大小的正文和 HTML 之间的差异，因为它有滚动条和没有滚动条。
有趣的是，最终图像中没有滚动条，只有滚动条滚动的区域仍然存在。
我宁愿不设置 599px 的 max-height 属性以避免溢出。我正在寻找任何见过此错误并知道重置滚动条区域的好方法的人。
1. 第一张图片是将 chrome 扩展扩展到其最大 600px 高度。

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
}

此解决方案中有两件值得注意的事情:

溢出切换必须包括 auto溢出属性。以 auto 开头或 overlay不要紧;但是，最终的溢出属性必须与初始的不同。

超时与成功成正比。 0 ms 超时将不起作用，同时超时 5 ms将在 30% 左右工作。 20 ms 超时一直为我工作。

我相信超时与 DOM 刷新率有关。从快速 search ，就在 60 fps 附近(或 16.6̅ ms)，所以 20 ms绰绰有余。 17 ms 超时应该足够慢地刷新，以便 DOM 始终呈现溢出更改。

这是一个 demonstration功能工作:

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