在下面的系列图片中,您可以看到相同大小的正文和 HTML 之间的差异,因为有滚动条和没有滚动条。
有趣的是,最终图像中没有滚动条,只有滚动条滚动的区域存在。
我不想将 max-height 属性设置为 599px 以避免溢出。我正在寻找任何见过此错误并知道重置滚动条区域的好方法的人。
答案 0 :(得分:1)
通过使用 requestAnimationFrame(),滚动条在 DOM 重绘时刷新:
function scrollRefresh(element) {
// initial overflow attribute
element.style.overflow = "auto";
requestAnimationFrame(() => {
// final overflow attribute
element.style.overflow = "overlay";
});
}
使用 requestAnimationFrame 的一个好处是滚动条永远不会改变用户;相反,DOM 会无缝地重新绘制它。这种方法比 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 的评论,因为它帮助我找到了解决方案。