在 webkit 浏览器上输入编辑框会导致滚动

Question

我在 WebKit 浏览器（Chrome 和 Safari）上的网站标记存在问题，即当我在右侧滑块的编辑框中键入内容时，它会滚动左侧区域。

请看以下示例：
http://jsbin.com/obiyec/7
http://jsbin.com/obiyec/7/edit - html 代码（输入在 id="palette" 的 div 内）

1. 在 Chrome 或 Safari 中打开下一个链接
2. 在右上角的编辑框中输入内容
3. 注意左侧区域的滚动条会移动

如果可能的话，根本不可能彻底改变这个标记

问。如何防止滚动条移动并使其行为与FF相同？

Answer 1

这里的问题是，看起来你在做什么和你实际上在做什么是两件不同的事情。

看起来左侧的div 具有固定宽度，overflow: auto (div#kb-board) 和右侧的输入字段是不相关的元素 - 但它们不是。输入字段实际上是 div#kb-board 的子字段，但其父字段 (div#palette) 的位置为 fixed，因此它位于页面的右上角。

因此，输入字段实际上位于 div#kb-board 的右侧，当您输入它时，滚动条会随着您将焦点移到该 div 的右侧而移动。

所以在这种情况下，我会说 Chrome 正在显示正确的行为。

要解决此问题，您应该停止在 div#kb-board 中嵌套 div#palette。由于它使用固定定位，因此无需嵌套。

<div id="kb-board">
    <div id="boards-container">
        <div id="lane">...</div>
    </div>
    <!-- div#palette was originally here -->
</div>
<div id="palette">
    <input type="text" value="Type here" />
</div>

工作示例：http://jsbin.com/obiyec/8