Question

此js Bin说明了我在浏览Chrome时遇到的问题。当我专注于第一个输入并通过列表选项卡时，焦点将移动到用户不可见的输入，而不会按原样向上滚动。当您在列表中传递项目D时，您将看到它。如果我从每个输入中删除初始值，则滚动按预期工作。在我看来，关于自动选择前一个值的某些内容会破坏滚动。

我在这里做错了吗？它在Firefox中运行良好。

此外，如果任何人都可以建议一个解决方法，那将是一个很大的帮助。

Answer 1

你有一个很好的hack，但它可以简化：

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

对于不支持scrollIntoViewIfNeeded()的浏览器，该函数不会被调用。 Chrome 支持它，因此解决了这个问题。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: