选择文本时如何阻止浏览器滚动？潜在的浏览器错误？答案

【问题标题】：How to stop browser from scrolling when text is selected? Potential browser bug?选择文本时如何阻止浏览器滚动？潜在的浏览器错误？
【发布时间】：2011-07-04 17:41:10
【问题描述】：

我正在使用的应用程序遇到一个奇怪的问题...每当用户突出显示已在页面下方向下翻译的 div 上的文本时，浏览器将立即开始向上滚动。这真的很难描述，所以我制作了一个展示问题的示例页面......

http://riskable.com/files/scroll_problem.html

我还将文本上传到 pastebin 以便于查看（如果我以后删除该 URL）：

http://pastebin.com/ay6LUcfP

如果您通过 JavaScript 将 div1 和 div2 都翻译（）返回到它们的默认位置，则问题不会在 div1 中显示出来。它只出现在 div2 内部，并且只出现在用户面前（例如，它已被“translate()”转换）。

老实说，我认为这可能是一个浏览器错误，但我不确定，因为我不是 ECMAScript 或 DOM 专家。有什么想法吗？

编辑：我已更新 HTML 以在 Firefox 4+ 和 Opera 11+ 中工作（分别为 -moz-transform 和 -o-transform）。我还为更新的脚本创建了一个新的 pastebin 链接（链接已更新）。该问题似乎在这两种浏览器中都没有出现，因此它似乎肯定是 Chrome 错误。

编辑 2： 我已在 Chromium 网站上针对此问题打开了错误报告：http://code.google.com/p/chromium/issues/detail?id=74318

这可能是 Webkit 中的一个错误，但我会让 Chromium 人员找出是否是这种情况。

【问题讨论】：

我不在乎别人怎么说。这很有趣。对不起，希望我能帮上忙。
哇！这很奇怪。 FWIW：我在 Chrome 和 Apple Safari 中看到了它。 Firefox 和 IE8 没有这样做。
我无法在 Fx 4.0b12 中重现此内容。
你能解释一下你想要达到的目标吗？翻译和滚动似乎有点奇怪，最终目标是什么？
Jamie：最终目标是根据用户想要查看的内容上下滑动的用户界面。示例页面没有展示我的应用程序的功能——只是我遇到的问题。它的工作方式与那里的许多 CSS3 内容滑块示例非常相似，只是它不是左右滑动，而是上下滑动（实际上，它可以同时进行）。

标签： javascript html google-chrome webkit

【解决方案1】：

FWIW，问题似乎是浏览器的代码负责检测您何时选择超过 pre 的边界（即，何时应该滚动以进行该选择）在翻译后没有获得更新的位置。当您开始选择时，它会看到您正在选择，并且您的光标距离它认为 pre 的位置有半个屏幕，因此它向上滚动的速度非常快。相反，要使其向下滚动，您需要在选择时转到容器的底部，即您的 pre 的底部在 translate() 之前的位置。

也就是说，我显然不知道如何解决它，但我几乎可以肯定这是一个浏览器错误。

【讨论】：