Question

情况：有一个固定高度的父级div overflow: auto和足够的子级＆＃34; line-item＆＃34;高度足以触发滚动条存在的div。这些子div中的每一个都有tabindex = -1，因此可以以编程方式聚焦。

当这些子div中的任何一个以编程方式聚焦时，浏览器的默认行为（在本例中为Chrome 55）似乎是滚动父div以使新聚焦的子中心居中。有没有办法阻止这种行为？

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上的工作演示。

有没有办法防止父容器在子节点聚焦时滚动？

1 个答案: