javascript - 滚动到元素

Question

我需要滚动到其他 div 内的 div。

我正在使用 scrollIntoView，问题是即使 div 完全可见 scrollIntoView 仍然会滚动到元素中，因此元素与父 div 的顶部对齐。

每次我聚焦时，这都会导致“跳跃”效果，即使元素完全可见。请参见下面的示例:按 C 根本不应该滚动，只按 G ;) 应该。

https://codepen.io/kheim/pen/gWmwKj

我想知道是否有一种方法只有在元素不完全可见时才滚动到元素中。

在 Chrome 55+ 上试试这个。

谢谢!

Answer 1

此解决方案基于可见性计算。您将计算元素的 border-box 是否在 viewport 的内部。如果不是，则滚动到该元素。

function setFocus(id) {
    var el = document.getElementById(id);
    if(!isVisible(el)) {
        el.scrollIntoView();
    }    
}

function isVisible(element) {
    var borderBox  = element.getBoundingClientRect();
    var viewWidth = window.innerWidth || doc.documentElement.clientWidth;
    var viewHeight = window.innerHeight || doc.documentElement.clientHeight;
    var efp = function (x, y) { return document.elementFromPoint(x, y) };     

    // Returns false if it is not in the viewport
    if (borderBox.left > viewWidth || borderBox.top > viewHeight ||
      borderBox.right < 0 || borderBox.bottom < 0)
        return false;

    // Returns true if any of its four corners are visible
    return (
          element.contains(efp(borderBox.left,  borderBox.top))
      ||  element.contains(efp(borderBox.right, borderBox.top))
      ||  element.contains(efp(borderBox.right, borderBox.bottom))
      ||  element.contains(efp(borderBox.left,  borderBox.bottom))
    );
}

.container {
  height: 4cm;
  overflow: auto;
}

.item {
  height: 1cm;
  border: 1px solid #000;
}

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item" id="c">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
  <div class="item" id="g">G</div>
</div>
<button type="button" onclick="setFocus('c');">focus on C</button>
<button type="button" onclick="setFocus('g');">focus on G</button>