用香草语回答:

function isScrolledIntoView(el) {
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;

    // Only completely visible elements return true:
    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    // Partially visible elements return true:
    //isVisible = elemTop < window.innerHeight && elemBottom >= 0;
    return isVisible;
}

这里有一种使用Mootools实现相同目标的方法，可以是水平的、垂直的或两者都有。

Element.implement({
inVerticalView: function (full) {
    if (typeOf(full) === "null") {
        full = true;
    }

    if (this.getStyle('display') === 'none') {
        return false;
    }

    // Window Size and Scroll
    var windowScroll = window.getScroll();
    var windowSize = window.getSize();
    // Element Size and Scroll
    var elementPosition = this.getPosition();
    var elementSize = this.getSize();

    // Calculation Variables
    var docViewTop = windowScroll.y;
    var docViewBottom = docViewTop + windowSize.y;
    var elemTop = elementPosition.y;
    var elemBottom = elemTop + elementSize.y;

    if (full) {
        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
            && (elemBottom <= docViewBottom) && (elemTop >= docViewTop) );
    } else {
        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }
},
inHorizontalView: function(full) {
    if (typeOf(full) === "null") {
        full = true;
    }

    if (this.getStyle('display') === 'none') {
        return false;
    }

    // Window Size and Scroll
    var windowScroll = window.getScroll();
    var windowSize = window.getSize();
    // Element Size and Scroll
    var elementPosition = this.getPosition();
    var elementSize = this.getSize();

    // Calculation Variables
    var docViewLeft = windowScroll.x;
    var docViewRight = docViewLeft + windowSize.x;
    var elemLeft = elementPosition.x;
    var elemRight = elemLeft + elementSize.x;

    if (full) {
        return ((elemRight >= docViewLeft) && (elemLeft <= docViewRight)
            && (elemRight <= docViewRight) && (elemLeft >= docViewLeft) );
    } else {
        return ((elemRight <= docViewRight) && (elemLeft >= docViewLeft));
    }
},
inView: function(full) {
    return this.inHorizontalView(full) && this.inVerticalView(full);
}});

jquery scrollspy插件将允许您轻松做到这一点。 https://github.com/thesmart/jquery-scrollspy

$('.tile').on('scrollSpy:enter', function() {
    console.log('enter:', $(this).attr('id'));
});

$('.tile').on('scrollSpy:exit', function() {
    console.log('exit:', $(this).attr('id'));
});

$('.tile').scrollSpy();

使用IntersectionObserver API

(在现代浏览器中本机)

通过使用观察器来确定一个元素在视口中是否可见，或者在任何可滚动的容器中是否可见，这是非常简单有效的。

无需附加滚动事件并手动检查事件回调，这更有效:

//定义一个观察者实例 var观察者= new IntersectionObserver(onIntersection， { Root: null， // default为视口 阈值:目标可见区域的。5 //百分比。触发“onIntersection” }) //在交集变化时调用回调函数 函数onIntersection(条目，opts){ 条目。forEach(入口= > entry.target.classList。切换(“可见”,entry.isIntersecting) ） ｝ //使用观察者来观察一个元素 观察者。观察(document.querySelector('.box')) //停止观察: / / observer.unobserve (entry.target) 跨度{:固定;上图:0;左:0;｝ .box{宽度:100 px;身高:100 px;背景:红色;保证金:1000 px;过渡:综合成绩;｝ .box。可见{背景:绿色;这个特性:50%;｝ <span>纵向滚动&水平…< / span > < div class = '盒子' > < / div >

现代浏览器(包括移动浏览器)支持。IE - View浏览器支持表中不支持

我找到的最简单的解决方案是交集观察者API:

var observer = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true)
        console.log('Element has just become visible in screen');
}, { threshold: [0] });

observer.observe(document.querySelector("#main-container"));

我在我的应用程序中有这样一个方法，但它不使用jQuery:

/* Get the TOP position of a given element. */
function getPositionTop(element){
    var offset = 0;
    while(element) {
        offset += element["offsetTop"];
        element = element.offsetParent;
    }
    return offset;
}

/* Is a given element is visible or not? */
function isElementVisible(eltId) {
    var elt = document.getElementById(eltId);
    if (!elt) {
        // Element not found.
        return false;
    }
    // Get the top and bottom position of the given element.
    var posTop = getPositionTop(elt);
    var posBottom = posTop + elt.offsetHeight;
    // Get the top and bottom position of the *visible* part of the window.
    var visibleTop = document.body.scrollTop;
    var visibleBottom = visibleTop + document.documentElement.offsetHeight;
    return ((posBottom >= visibleTop) && (posTop <= visibleBottom));
}

编辑:此方法适用于I.E.(至少版本6)。请阅读评论以了解FF的兼容性。