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

Question

我在WebKit浏览器(Chrome和Safari)上有网站标记问题,即当我在右滑块的编辑框中键入内容时,它会滚动左侧区域.

请看下面的例子:
http ://jsbin.com/obiyec/7
http://jsbin.com/obiyec/7/edit - html代码(输入在div里面,id ="palette")

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#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