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