javascript - 检测可滚动 div 中的元素何时超出 View

Question

我需要为以下问题找到一个好的解决方案。我看到很多人询问有关跟踪元素是否在页面或浏览器窗口的 View 端口之内或之外的问题。我需要能够复制此操作，但在滚动的 DIV 中，例如溢出:滚动。有谁知道这个特定操作的好例子吗？

提前致谢。

Answer 1

这是已接受答案的纯 javascript 版本，不依赖于 jQuery，并对部分 View 检测进行了一些修复，并支持顶部的 View 外。

function checkInView(container, element, partial) {

    //Get container properties
    let cTop = container.scrollTop;
    let cBottom = cTop + container.clientHeight;

    //Get element properties
    let eTop = element.offsetTop;
    let eBottom = eTop + element.clientHeight;

    //Check if in view    
    let isTotal = (eTop >= cTop && eBottom <= cBottom);
    let isPartial = partial && (
      (eTop < cTop && eBottom > cTop) ||
      (eBottom > cBottom && eTop < cBottom)
    );

    //Return outcome
    return  (isTotal  || isPartial);
}

作为奖励，此函数可确保元素在 View 中(如果不在 View 中(部分或全部)):

function ensureInView(container, element) {

    //Determine container top and bottom
    let cTop = container.scrollTop;
    let cBottom = cTop + container.clientHeight;

    //Determine element top and bottom
    let eTop = element.offsetTop;
    let eBottom = eTop + element.clientHeight;

    //Check if out of view
    if (eTop < cTop) {
      container.scrollTop -= (cTop - eTop);
    }
    else if (eBottom > cBottom) {
      container.scrollTop += (eBottom - cBottom);
    }
}