有没有一种方法可以防止父容器在子节点获得焦点时滚动？

Question

情况：有一个固定高度的父级div，带有overflow: auto属性，并拥有足够多的子"line-item" div，使其高度足以触发滚动条出现。每个这样的子div都有tabindex=-1属性，因此可以通过编程方式进行聚焦。

当任何一个这样的子div被程序化地聚焦时，浏览器（在本例中为Chrome 55）的默认行为似乎是滚动父div以将新聚焦的子div居中显示。是否有任何方法可以防止这种行为发生？

- Craig Kovatch

---

跟进：不能只重置 ScrollTop，因为它需要能够滚动。我想我可以缓存先前的滚动值，并在子节点上设置 OnFocus，在 SetTimeout 中恢复先前的滚动偏移 :( - Craig Kovatch

我已更新我的解决方案，以保留现有的偏移量，而不是始终返回到顶部。 - Brett DeWoody

Answer 1

是和不是。据我所知，没有一种方法可以防止父元素滚动到焦点元素。但是，您可以通过将父元素滚动回顶部来撤消滚动。如果正确完成，用户将无法注意到。

为此，每次以编程方式聚焦元素时，请检索聚焦元素的父节点的当前滚动偏移量，并将scrollTop设置为该偏移量。

var children = document.getElementsByClassName('child')

for (var i = 0; i < children.length; i++) {
  children[i].addEventListener('click', function (e) {
    e.preventDefault
    var focused = document.getElementById('focus')
    var focusedParent = focused.parentNode
    var savedOffset = focusedParent.scrollTop
    focused.focus();
    focused.parentNode.scrollTop = savedOffset;
  })
}

.parent {
  height: 300px;
  overflow: auto;
}

.child {
  height: 50px;
  background-color: gray;
  border-bottom: 1px solid black;
  color: white;
  box-sizing: border-box;
  text-align: center;
  line-height: 50px;
  font-family: Arial;
}

<div class="parent">
  <div class="child" tabIndex="-1">1</div>
  <div class="child" tabIndex="-1">2</div>
  <div class="child" tabIndex="-1">3</div>
  <div class="child" tabIndex="-1">4</div>
  <div class="child" tabIndex="-1">5</div>
  <div class="child" tabIndex="-1">6</div>
  <div class="child" tabIndex="-1">7</div>
  <div class="child" tabIndex="-1">8</div>
  <div class="child" tabIndex="-1" id="focus">9</div>
  <div class="child" tabIndex="-1">10</div>
</div>

这是关于编程的演示，可在Codepen上查看。保留html，不做解释。

- Brett DeWoody

---

谢谢您--我忘记在那个时候回来了，但这就是我最终做的事情 :) - Craig Kovatch