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

我在WebKit浏览器（Chrome浏览器& Safari）上遇到了网站标记问题，即当我在右滑块编辑框中键入内容时，它会滚动左侧区域。在webkit浏览器中输入编辑框会导致滚动

请看看下面的例子：
http://jsbin.com/obiyec/7
http://jsbin.com/obiyec/7/edit - HTML代码（输入为内部具有ID = “调色板” DIV）

在Chrome或Safari打开下一个链接
类型东西在右上角的编辑框中
请注意，左侧区域的滚动条发生移位

这是不太可能改变这一标记根本上如果可能的话

问：如何防止转移滚动条，并使其行为同样的方式，因为它是在FF？

2012-07-08 Andriy Tkach

您的问题描述不清。在你的例子中没有“编辑框”，它只是一个静态的'div'。也许你想要一个'textarea'？ – Sparky 2012-07-08 15:13:50

@ Sparky672尝试链接。如果您在Chrome中打开[JSBin]（http://jsbin.com/obiyec/7），则右上角会出现一个输入字段。键入它，左边的'div'和'overflow：auto'将会滚动到右侧，即使它没有被交互。 – 2012-07-08 15:16:40

@MyHeadHurts，我在Safari中，我无法在左上角的框中输入任何内容。看看HTML，它只是一个'div'。 – Sparky 2012-07-08 15:17:38

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

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

结果，输入字段实际上是对div#kb-board右侧，当你在它滚动条移动为您给予重点是div的右侧输入。

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

要解决此问题，您应该停止在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

来源

2012-07-08 15:47:05

你是对的。我怀疑FF可能忽略了关注div而不是WebKit的需要。很好的接收。谢谢！ – 2012-07-08 15:59:39

任何人都可以将我指向'input type =“edit”'的文档吗？谢谢。 – Sparky 2012-07-08 16:01:06

@ Sparky672对不起，我的意思是输入类型=“文字”。这里是：http://dev.w3.org/html5/spec/single-page.html#text-type-text-state-and-search-state-type-search – 2012-07-08 16:03:37

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

回答

相关问题