时间戳

首页 > 解决方案 > 更新文本时在 Chrome 中使用 css 网格滚动生涩

css - 更新文本时在 Chrome 中使用 css 网格滚动生涩

问题描述

以下代码示例在 Chrome 67 中无法平滑滚动；当您使用鼠标抓住滚动条时，您会注意到当计时器更新标题中的文本时，滚动条拖动会每 1 秒中止一次。

<html><body style="margin:0pt;">
    <div style="height:100vh;overflow:hidden;display:grid;grid-template-areas:'topbar' 'body'">
        <div style="grid-area:topbar;background-color:lightblue">
            This is a fixed top bar with ticker: <span id="ticker">0</span>
        </div>
        <div style="grid-area:body;font-size:200pt;overflow:auto;">
            Try and scroll down! a a a a a a a a a a a a a a a a a 
        </div>      
    </div>
    <script type="text/javascript">
        setInterval(function(){
            document.getElementById("ticker").innerHTML = Number(document.getElementById("ticker").innerHTML) + 1;
        }, 1000);
    </script>
</body></html>

它在 Edge 中按预期工作。

这个问题有解决方案吗？

标签： cssgoogle-chromecss-grid

解决方案

推荐阅读