Как узнать какие объекты попали в зону видимости пользователя?

Question

[artmirarmi]

Допустим есть много блоков. Как узнать что пользователь увидел этот блок при скролле родительского элемента (даже если он торчит только на 1px с низу страницы)?

https://jsfiddle.net/v3uhdbjr/25/

Answer 1

[iDevArtem]

var margin = 15;  // 15px отступ для наглядности

$('.container').on('resize scroll', function() {

  var $container = $(this);
  var container_height = $container.outerHeight();

  $('.block').each(function(i, block) {
    var $block = $(block);
    
    var top = $block.offset().top - $container.offset().top;
    var bottom = top + $block.outerHeight();

    var is_visible = (bottom > (0 + margin) && top < (container_height - margin));

    $block[is_visible ? 'addClass' : 'removeClass']('block-visible');
  });
}).trigger('scroll');

.block-visible { background-color: red; }

P.S.: может есть лучше решение =/

Answer 2

[forspamonly2]

https://developer.mozilla.org/ru/docs/Web/API/Inte...