Question

我在JavaScript滑块中有一个表单。 如果我使用Tab键将焦点放在已有内容的表单字段上，则浏览器会意外滚动滑块。我只在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，但条件并不完全相同（垂直滚动而不是水平;不使用overflow：hidden）。所以，也许这个问题也会发生在除我之外的其他条件下。

Answer 1

我找到了一个快速修复此问题，有时候有点笨拙，但是当您将注意力集中到滑块中的输入时会涉及添加事件处理程序。

这是我的代码

$('.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/

通过滑块（Chrome）中的表单字段进行选项卡时出现意外滚动

1 个答案: