设置 HTM5 文本会杀死 Chrome 中的滚动条拖动

Posted 2023-05-09

【中文标题】设置 HTM5 文本会杀死 Chrome 中的滚动条拖动

【英文标题】：Setting HTM5 text kills scrollbar drag in Chrome

【发布时间】：2018-12-21 07:52:37

【问题描述】：

我在 javascript 中有一个计时器，它每秒触发一次以更新页面中的某些文本 (html5)，如下所示：

document.getElementById('CountDown').innerHTML = "some string";

这工作正常，但如果此代码在用户拖动滚动条句柄时运行，则拖动被中止。这是一个非常烦人的用户界面行为，我无法解决。

如果我在计时器事件中注释掉该行，那么滚动条将正常工作。

注意：它只发生在 Chrome 上，而不是在 Firefox 或 Opera 上。

知道如何解决这个问题吗？

【问题讨论】：

添加类似（JS Fiddle）的演示，这样我就可以重现实际问题。

正如@LaljiTadhani 提到的，请编辑您的问题以提供Minimal, Complete, and Verifiable example，因为目前我们没有足够的信息来真正帮助您。话虽如此，I created a test 使用您提供的代码，但我无法看到您遇到的问题。

感谢我正在使用 JS Fiddle 进行演示（以前从未使用过），但它似乎不喜欢使用计时器

终于让计时器在 JSFiddle 中工作（使用 jQuery ready() 函数），但它没有说明问题 - 请参阅jsfiddle.net/109nwLub/36 这一定与使用 Vue (v-for) 来生成我的可滚动表。我会尝试在 JSFiddle 中演示问题，但这并不容易。

如果你想提供一个在 JSFiddle 上使用 vue 的例子 this fiddle 是一个很好的起点

【参考方案1】：

平滑滚动是提升用户体验的一个非常重要且有效的功能，像你这样的chrome浏览器平滑滚动的情况好像有好几个，怎么不正常，但问题是必须的与旧版本相关的时间，例如：

https://github.com/simov/simplr-smoothscroll/issues/27 https://github.com/mathiasbynens/jquery-smooth-scrolling/issues/1 https://github.com/iamdustan/smoothscroll/issues/28

您可以在 CSS 中尝试以下规则：

html, body  
    overflow: hidden, 
    height: 100% 

对于您的容器，您可以附加以下规则：

 
    overflow: auto; 
    height: 100% 

相反，由于代码在其他浏览器中工作意味着您的代码是有效的，因此只需确保您使用的是最新版本之一，清除缓存并试一试。

【参考方案2】：

可能不是您想听到的答案，但几个月前我遇到了这个问题，当 javascript 更新 DOM 时，chrome 的平滑滚动功能存在几个已知错误。

较新版本的 Chrome 似乎可以更好地处理这个问题。我在最新版本的 Chrome 上做了一个快速测试，代码和你的类似，没有问题。

如果在其他浏览器中运行良好，您的代码似乎不太可能出现错误。最好建议用户确保 Chrome 已完全更新以获得最佳网站体验或使用其他浏览器。

【讨论】：

谢谢。我发现它只发生在使用 Vue.js 填充的表上。当我删除 Vue 时就可以了。我也在使用最新的 Chrome。看来我正在使用 Vue 做一些影响 Chrome 但不影响 Opera 和 FireFox 的事情。 （然而，Edge 似乎有这个和其他更严重的问题。）

【参考方案3】：

现在似乎没问题 - Chrome 68.0.3440 发布后