我们正在开发一个文本编辑器(基于文本区域)，它将“ Canvas ”向右移动以在左侧显示菜单。几乎是标准的幻灯片显示菜单。
菜单是一个文档列表，当你点击一个文档时，textarea 会被选中的文档文本填充，光标通过 selectionRange/Range 设置到最后保存的位置。
这里有点奇怪:文本区域的一部分不在屏幕的右侧，如果光标放在那里(或什至靠近那里)，Chrome 会将 Canvas div 滚动到左侧，尽管position:relative。
有什么办法可以避免这种情况吗？
HTML:
<body>
<div id="wrapper">
<div id="canvas>
<textarea>
</div>
</div>
</body>
CSS:
#wrapper {
position: absolute;
left: 300px; /* set via js, to show the menu */
right: 0;
overflow: hidden;
}
#canvas {
position: relative;
width: 1440px; /* viewport width set via js */
}
textarea {
width: 100%; /* this properly relates to the fixed width canvas parent */
}
最佳答案
OP 在这里:这似乎是无法避免的。问题是，如果光标位置在 inner-editor Shadow DOM 元素的溢出部分，因此不可见，Chrome 将移动 inner-editor(= 文本区域内容)，直到光标位于文本区域可见的任何部分。
Afaik，因为这是影子 DOM 的一部分，如果不将默认文本区域替换为您自己的 Web 组件，则很难更改此行为。
在我们的例子中，这个问题被部分地掩盖了，因为有问题的 textarea 内容包含一个长长的空白字符变化，这些字符没有被换行但也不可见。
我们应用的解决方案是滚动处理程序，它在浏览器四处移动后立即将所有内容返回到其预期位置。
关于javascript - 防止 Chrome 强制滚动光标进入 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26817742/