html - 在 slider (Chrome) 中通过表单域切换时出现意外滚动

Question

我在 JavaScript slider 中有一个表单。 如果我使用 Tab 键将焦点放在已有内容的表单字段上，浏览器会意外滚动 slider 。我只在 Chrome(版本 40.0.2214.91(64 位)) Ubuntu 14.04)。我想知道是否还有其他人遇到过这种情况，如果遇到过，您能否找到解决方法？

这是我用来重现问题并缩小贡献条件的代码片段(也在 http://jsfiddle.net/gkorban/jtuo5my0/6/ ):

.viewport {
  border: 2px solid blue;
  width: 400px;
  overflow: hidden;
}
.slider {
  border: 2px solid red;
  width: 600px;
}
.form-wrapper {
  width: 200px;
  border: 2px solid green;
}
input {
  width: 190px;
}

<div class="viewport">
  <div class="slider">
    <div class="form-wrapper">
      <form action="#">
        <input type="text" name="field1" />
        <input type="text" name="field2" value="field 2" />
      </form>
    </div>
  </div>
</div>
<p>Click on field 1, then press tab to give focus to field 2.</p>

我已经能够将条件缩小到以下范围:

• 父 div 使用 overflow:hidden
• 子div比父div宽
• 使用 Tab 键改变字段焦点
• 获得焦点的表单字段已经有值
• 到目前为止，仅在 Chrome 中
• 禁用/启用 Chrome 自动完成似乎没有任何影响

该问题似乎与此处报告的问题相似:https://github.com/zurb/foundation/issues/6066 ，但条件并不完全相同(垂直滚动而不是水平滚动；不使用溢出:隐藏)。所以，也许这个问题也会在我以外的其他条件下发生。

Answer 1

我找到了一个快速解决这个问题的方法，它有时有点笨拙，但涉及添加一个事件处理程序，以便在您关注 slider 中的输入时使用。

这是我的代码

$('.bx-viewport input').focusin(function() {
    setTimeout(function() {             // setTimeout makes sure that this runs after 
                                        // the original problem (it had a delay)
       $('.bx-viewport').scrollLeft(0); 
    }, 0);
}); 

因此您的解决方案应该是找出哪个元素应用了 scrollLeft 并将其设置为零。

这是工作的 jsfiddle:http://jsfiddle.net/jtuo5my0/7/