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

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

请看以下示例：

-html代码（输入在div中，id=“调色板”）

在Chrome或Safari中打开下一个链接

在右上角的编辑框中键入内容

请注意，左侧区域中的滚动条会移动

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

---

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

这里的问题是，看起来您正在做的事情和实际正在做的事情是两件不同的事情

左边的

div

看起来像是固定宽度的

overflow:auto

（

div#kb board

）和右边的输入字段是不相关的元素，但它们不是。输入字段实际上是

div#kb board

的子项，但其父项（

div#palete

）具有

固定的位置，因此它位于页面的右上角

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

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

要解决此问题，应停止在
div#kb板
中嵌套
div#调色板
。因为它使用固定定位，所以不需要嵌套它

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


...

工作示例：
您的问题描述不清楚。在您的示例中没有“编辑框”，它只是一个静态的
div
。也许你想要一个
textarea
？@Sparky672试试这些链接。如果在Chrome中打开，则右上角有一个输入字段。输入它，左侧带有溢出的
div
：auto

将向右滚动，即使它没有被交互。@MyHeadharts，我在Safari中，我无法在左上框中输入任何内容。看看HTML，它只是一个

div

@Sparky672对不起，我是个白痴。我指的是右上角的输入框（我也更正了评论）。@MyHeadharts，我也试过了。在右上角的框中输入文本（并点击回车/回车）在Safari中没有任何作用。你是对的。我怀疑FF可能忽略了关注div而不是WebKit的需要。接得好。谢谢有人能给我指一下

input type=“edit”

的文档吗？谢谢。@Sparky672对不起，我的意思是输入type=“text”。就是这样：我们使用的框架没有处理html div等等。布局是在更抽象的层次上创建的。但是根据你的回答，我们发现同样的问题也可以通过简化布局来解决。所以简化是可行的！谢谢你的提示