Question

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

请看下面的例子：
http://jsbin.com/obiyec/7
http://jsbin.com/obiyec/7/edit - html代码（输入在div中，id =“palette”）

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

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

Q值。如何防止滚动条移动并使其表现与FF相同？

Answer 1

这里的问题是，你正在做的事情以及你实际做的事情是两件不同的事情。

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

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

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

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

<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

在webkit浏览器中键入编辑框会导致滚动

1 个答案: