出现空滚动条，没有溢出

Question

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

在下面的系列图片中，您可以看到相同大小的主体和 HTML 有无滚动条的区别。

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

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

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

2。第二张图片正在扩展 table 以溢出 600px 高度，从而产生滚动条。

3。第三张图片折叠 table 并将显示恢复到原来的 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 的评论，因为它帮助我找到了解决方案。

出现空滚动条，没有溢出

Empty scrollbar appears with no overflow

html

css

overflow

scrollbar

google-chrome-extension