Question

以下代码示例无法在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中按预期工作。

这个问题有解决方法吗？

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

0 个答案: