Chrome 带有值的输入的滚动问题

Question

此 js Bin 演示了我在 Chrome 中遇到的问题。当我关注列表中的第一个输入和选项卡时，焦点将移动到用户不可见的输入，而不会按应有的方式向上滚动。当您传递列表中的项目 D 时，您会看到它。如果我从每个输入中删除初始值，则滚动会正常工作。在我看来，有关自动选择先前值的某些事情会破坏滚动。

我是不是做错了什么？它在 Firefox 中运行良好。

此外，如果有人可以提出解决方法，那将是一个很大的帮助。

Answer 1

你写的不错hack，不过可以简化一下：

$(function() {
  $('input').on('focus', function(e) {
    if(this.scrollIntoViewIfNeeded) {
      this.scrollIntoViewIfNeeded();
    }
  });
});

对于不支持scrollIntoViewIfNeeded()的浏览器，该函数将不会被调用。 Chrome支持，问题解决

$(function() {
  $('input').on('focus', function(e) {
    this.scrollIntoViewIfNeeded();
  });

  $('input').first().focus();
});

.timepoints {
  list-style: none;
  margin: 0.5em 0;
  height: 10em;
  overflow: auto;
  border: 1px solid black;
  padding: 0.1em
}
.timepoints li {
  border: 1px solid black;
  padding: 0.5em;
  margin-bottom: 0.2em;
  margin-left: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="timepoints">
  <li>
    <input type="text" value="A" />
  </li>
  <li>
    <input type="text" value="B" />
  </li>
  <li>
    <input type="text" value="C" />
  </li>
  <li>
    <input type="text" value="D" />
  </li>
  <li>
    <input type="text" value="E" />
  </li>
  <li>
    <input type="text" value="F" />
  </li>
</ul>

Chrome 带有值的输入的滚动问题

Chrome scroll issue for inputs with values

html

scroll

google-chrome

overflow