在webkit浏览器中输入编辑框会导致滚动 [英] on webkit browsers typing into edit box causes scrolling

问题描述

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

请看下面的例子：

http://jsbin.com / obiyec / 7

http://jsbin.com/obiyec / 7 /编辑 - html代码（输入在div中，id =palette）

1. 打开Chrome中的下一个链接或Safari浏览器


2. 在右上角的编辑框中输入内容


3. 请注意左侧区域的滚动条移动
   
ol>



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



如何防止滚动条移动并使其行为与FF中的行为一样？

解决方案

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





它看起来像 div 左边的固定宽度和 overflow：auto （ div＃kb-board ）和输入字段on右边是不相关的元素 - 但它们不是。输入字段实际上是 div＃kb-board 的子元素，但其父元素（ div＃palette ）的 fixed 定位，所以它位于页面的右上角。





结果，输入字段实际上位于右边的 div＃kb-board ，当你输入它时，滚动条移动，因为你把焦点放在该div的右边。





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





要解决这个问题，您应该停止嵌套<$在$ div＃kb-board 中的c $ c> div＃palette 。由于它使用了固定位置，因此不需要嵌套它。

 < div id =kb-board> 
< div id =boards-container> 
< div id =lane> ...< / div> 
< / div> 
<！ -  div＃palette最初在这里 - > 
< / div> 
< div id =palette> 
< input type =textvalue =在此输入/> 
< / div> 
  

工作示例： http://jsbin.com/obiyec/8




I have an issue with website markup on WebKit browsers (Chrome & Safari), i.e. when I type something in edit box of right-slider, it scrolls the left area.

Please take a look at following example:
http://jsbin.com/obiyec/7
http://jsbin.com/obiyec/7/edit - html code (input is inside div with id="palette")

1. Open next link in Chrome or Safari
2. Type something in edit box in right upper corner
3. Notice that scrollbar in left area shifts

It is very unlikely to change this markup radically if possible

Q. How to prevent scroll-bar from shifting and make it behave same way as it is in FF?

解决方案

The problem here is that what it looks like you are doing and what you are actually doing are two different things.

It looks like the div on the left with a fixed width and overflow: auto (div#kb-board) and the input field on the right are unrelated elements - but they are not. The input field is actually a child of div#kb-board but its parent (div#palette) has fixed positioning so it sits in the top right of the page.

As a result, the input field is actually on the right hand side of div#kb-board and when you type in it the scroll bar moves as you are giving focus to the right hand side of that div.

So in this case, I would say Chrome is showing the correct behavior.

To resolve this you should stop nesting div#palette within div#kb-board. Since it uses fixed positioning, there is no need to nest it.

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

Working example: http://jsbin.com/obiyec/8

这篇关于在webkit浏览器中输入编辑框会导致滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！