8

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

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

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

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

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

4

1 回答 1

6

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

看起来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

于 2012-07-08T15:47:05.907 回答