javascript - 滚动后如何检查元素是否可见？(How to Check if element is visible after scrolling?)

Question

I'm loading elements via AJAX.

(我正在通过AJAX加载元素。)

Some of them are only visible if you scroll down the page.

(仅当您向下滚动页面时，其中一些才可见。)
Is there any way I can know if an element is now in the visible part of the page?

(我有什么办法可以知道某个元素是否现在在页面的可见部分中？)

  ask by yoavf translate from so

Answer 1

This should do the trick:

(这应该可以解决问题：)

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

Simple Utility Function This will allow you to call a utility function that accepts the element you're looking for and if you want the element to be fully in view or partially.

(简单实用程序功能这将允许您调用一个实用程序功能，该功能接受您要查找的元素，以及您是否希望该元素完全可见或部分可见。)

function Utils() {

}

Utils.prototype = {
    constructor: Utils,
    isElementInView: function (element, fullyInView) {
        var pageTop = $(window).scrollTop();
        var pageBottom = pageTop + $(window).height();
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();

        if (fullyInView === true) {
            return ((pageTop < elementTop) && (pageBottom > elementBottom));
        } else {
            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
        }
    }
};

var Utils = new Utils();

Usage

(用法)

var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);

if (isElementInView) {
    console.log('in view');
} else {
    console.log('out of view');
}