Html 空滚动条显示,没有溢出 我想知道是否有一个干净的方法来“重置”滚动条。

Html 空滚动条显示,没有溢出 我想知道是否有一个干净的方法来“重置”滚动条。,html,css,google-chrome-extension,scrollbar,overflow,Html,Css,Google Chrome Extension,Scrollbar,Overflow,在下面的一系列图像中,您可以看到相同大小的主体和HTML通过滚动条而不是滚动条的不同 有趣的是,滚动条并没有出现在最终图像中,只是滚动条滚动的区域仍然存在 我不希望将max height属性设置为599px以避免溢出。我期待着任何人谁看到这个错误,并知道一个很好的方法来重置滚动条区域 1.第一张图片是将chrome扩展扩展到其最大600px高度。 2.第二幅图是扩展表格以溢出600px的高度,生成一个滚动条。 3.第三个图像是折叠桌子并将显示器恢复到原来的600px高度;但是,现在存在一个空

在下面的一系列图像中,您可以看到相同大小的主体和HTML通过滚动条而不是滚动条的不同

有趣的是,滚动条并没有出现在最终图像中,只是滚动条滚动的区域仍然存在

我不希望将max height属性设置为599px以避免溢出。我期待着任何人谁看到这个错误,并知道一个很好的方法来重置滚动条区域

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

2.第二幅图是扩展表格以溢出600px的高度,生成一个滚动条。

3.第三个图像是折叠桌子并将显示器恢复到原来的600px高度;但是,现在存在一个空的“滚动字段”?

使用requestAnimationFrame-已更新 通过使用,可在DOM重新绘制时完全刷新滚动条:

函数滚动刷新(元素){
//初始溢出属性
element.style.overflow=“自动”;
requestAnimationFrame(()=>{
//最终溢出属性
element.style.overflow=“覆盖”;
});
}
使用requestAnimationFrame的一个好处是滚动条不会对用户进行更改;相反,DOM会毫无表情地重新绘制它。此方法比setTimeout()方法更加平滑和高效



使用setTimeout 强制DOM刷新滚动条的函数将起作用:

函数滚动刷新(元素){
//初始溢出属性
element.style.overflow=“自动”;
设置超时(()=>{
//最终溢出属性
element.style.overflow=“覆盖”;
},17);//17毫秒超时
}
此解决方案中需要注意两件事:

  • 溢出切换必须包括
    auto
    溢出属性。以
    auto
    overlay
    开头并不重要;但是,最终溢出属性必须与初始溢出属性不同
  • 超时与成功成正比。
    0毫秒
    的超时不起作用,而
    5毫秒
    的超时将在30%左右起作用。
    20ms的超时时间对我来说一直有效
  • 我相信超时与DOM刷新率有关。简单地说,它大约是
    60 fps
    (或
    16.6̅ms
    ),所以
    20 ms
    就足够了。
    17 ms的超时
    的刷新速度应足够慢,以便DOM始终呈现溢出更改



    下面是函数工作的一个示例:


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

    我想知道这是否是DOM的舍入错误。。。我找不到发生这种错误的任何记录,所以我想看看其他人的想法。不是答案,但对于blink和webkit浏览器,您可以通过
    ::-webkit scrollbar{display:none;}创建一个不可见的滚动条
    @lastr2d2您的评论实际上启发了我尝试通过更改某些元素的属性来强制刷新它们。由于某些原因,隐藏溢出无法解决问题,但将溢出设置为自动或临时覆盖,然后恢复到其他显示将刷新元素。我会在我的回答中发布更多,但是谢谢你的评论,它帮助了我。很高兴它在某种程度上帮助了我