Как проверить, виден ли элемент после прокрутки?

Question

Я загружаю элементы через AJAX. Некоторые из них видны только при прокрутке страницы вниз.
Могу ли я узнать, находится ли элемент в видимой части страницы?

Answer 1

Изменен принятый ответ, так что для элемента должно быть установлено свойство отображения, отличное от "none", с качеством как видимым.

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

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();
  var elemDisplayNotNone = $(elem).css("display") !== "none";

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

Answer 2

Вот способ добиться того же, используя 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);
}});

Answer 3

У меня есть такой метод в моем приложении, но он не использует 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.

Answer 4

Пример, основанный на этом ответе , чтобы проверить, является ли элемент видимым на 75% (то есть менее 25% его находится вне экрана).

function isScrolledIntoView(el) {
  // check for 75% visible
  var percentVisible = 0.75;
  var elemTop = el.getBoundingClientRect().top;
  var elemBottom = el.getBoundingClientRect().bottom;
  var elemHeight = el.getBoundingClientRect().height;
  var overhang = elemHeight * (1 - percentVisible);

  var isVisible = (elemTop >= -overhang) && (elemBottom <= window.innerHeight + overhang);
  return isVisible;
}

Answer 5

Я искал способ увидеть, появится ли элемент в ближайшее время, поэтому, расширив фрагменты выше, мне удалось это сделать. думал, что оставлю это здесь на всякий случай, если это кому-нибудь поможет

elm = это элемент, который вы хотите проверить, находится в представлении

scrollElement = вы можете передать окно или родительский элемент с прокруткой

смещение = если вы хотите, чтобы он срабатывал, когда элемент находится на расстоянии 200 пикселей до того, как его на экране, передайте 200

function isScrolledIntoView(elem, scrollElement, offset)
        {
            var $elem = $(elem);
            var $window = $(scrollElement);
            var docViewTop = $window.scrollTop();
            var docViewBottom = docViewTop + $window.height();
            var elemTop = $elem.offset().top;
            var elemBottom = elemTop + $elem.height();
            
            return (((elemBottom+offset) >= docViewBottom) && ((elemTop-offset) <= docViewTop)) || (((elemBottom-offset) <= docViewBottom) && ((elemTop+offset) >= docViewTop));
        }

Answer 6

Этот метод вернет true, если какая-либо часть элемента видна на странице. В моем случае это сработало лучше и может помочь кому-то еще.

function isOnScreen(element) {
  var elementOffsetTop = element.offset().top;
  var elementHeight = element.height();

  var screenScrollTop = $(window).scrollTop();
  var screenHeight = $(window).height();

  var scrollIsAboveElement = elementOffsetTop + elementHeight - screenScrollTop >= 0;
  var elementIsVisibleOnScreen = screenScrollTop + screenHeight - elementOffsetTop >= 0;

  return scrollIsAboveElement && elementIsVisibleOnScreen;
}

Answer 7

Я адаптировал это короткое расширение функции jQuery, которое вы можете свободно использовать (лицензия MIT).

/**
 * returns true if an element is visible, with decent performance
 * @param [scope] scope of the render-window instance; default: window
 * @returns {boolean}
 */
jQuery.fn.isOnScreen = function(scope){
    var element = this;
    if(!element){
        return;
    }
    var target = $(element);
    if(target.is(':visible') == false){
        return false;
    }
    scope = $(scope || window);
    var top = scope.scrollTop();
    var bot = top + scope.height();
    var elTop = target.offset().top;
    var elBot = elTop + target.height();

    return ((elBot <= bot) && (elTop >= top));
};

Answer 8

Я написал компонент для задачи, предназначенный для обработки большого количества элементов чрезвычайно быстро (на мелодию <10 мс для 1000 элементов <em>на медленном мобильном телефоне) ).

Он работает с каждым типом контейнера прокрутки, к которому у вас есть доступ - окно, элементы HTML, встроенный iframe, порожденное дочернее окно - и очень гибок в обнаружении ( полная или частичная видимость , рамка границы или рамка контента , пользовательская зона допуска , и т. д. ).

Огромный, в основном автоматически сгенерированный набор тестов гарантирует, что он работает как рекламируется, кросс-браузер .

Дайте ему шанс, если хотите: jQuery.isInView . В противном случае вы можете найти вдохновение в исходном коде, например, здесь .

Answer 9

Я предпочитаю использовать jQuery expr

jQuery.extend(jQuery.expr[':'], {  
    inview: function (elem) {
        var t = $(elem);
        var offset = t.offset();
        var win = $(window); 
        var winST = win.scrollTop();
        var elHeight = t.outerHeight(true);

        if ( offset.top > winST - elHeight && offset.top < winST + elHeight + win.height()) {
            return true;    
        }    
        return false;  
    }
});

так что вы можете использовать его таким образом

$(".my-elem:inview"); //returns only element that is in view
$(".my-elem").is(":inview"); //check if element is in view
$(".my-elem:inview").length; //check how many elements are in view

Вы можете легко добавить такой код в scroll функцию события и т. Д., Чтобы проверять ее каждый раз, когда пользователь будет прокручивать представление.

Answer 10

Простая модификация прокручиваемого div (контейнера)

var isScrolledIntoView = function(elem, container) {
    var containerHeight = $(container).height();
    var elemTop = $(elem).position().top;
    var elemBottom = elemTop + $(elem).height();
    return (elemBottom > 0 && elemTop < containerHeight);
}

ПРИМЕЧАНИЕ: это не работает, если элемент больше прокручиваемого div.