Question

我们正在开发一个文本编辑器（基于textarea）来移动＆＃39;画布＆＃39;向右显示左侧的菜单。几乎是标准的幻灯片到菜单。

菜单是一个文档列表，当您单击一个文档时，textarea将填充所选的文档文本，并通过selectionRange / Range将光标设置为上次保存的位置。

这里变得很时髦：部分文本区域位于屏幕的右侧，如果光标放在那里（甚至靠近那里），Chrome会将画布div滚动到左侧，尽管位置为：relative。< / p>

有没有办法阻止这种情况？

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 */
}

Answer 1

OP在这里：这似乎是不可避免的。问题是如果光标位置在inner-editor Shadow DOM元素的溢出部分，因此不可见，Chrome将移动inner-editor（= textarea内容），直到光标位于任何位置textarea的一部分是可见的。

Afaik因为这是影子DOM的一部分，所以如果不用你自己的Web组件替换默认的textarea，很难改变这种行为。

在我们的案例中，这个问题部分蒙蔽了，因为有问题的textarea内容包括白色空间字符的长期变化，这些变化并没有被包裹但也看不见。< / p>

我们应用的解决方案是滚动处理程序，它会在浏览器移动它之后立即返回所有位置。

Answer 2

尝试使用css overflow：

body {
    overflow: hidden;
}

不确定这是否会解决您的问题，因为未提供完整代码，但我希望这会有所帮助！

防止Chrome强制将光标滚动到视图中

2 个答案: