Как определить появление элемента во вьюпорт?

Question

[jeruthadam]

Я хочу выполнять определенное событие относительно элемента тогда, когда он появляется на экране пользователя. Как это сделать, куда смотерть?

Comments

[Kovalsky]

Было и на тостере, и на stackoverflow, пользуйтесь поиском.

[jeruthadam]

Никита Полевой, не нашел

[jeruthadam]

Тут 90% вопросов были, и что

[Kovalsky]

jeruthadam, и то, что заново их задавать не надо. Ищите, функция поиска на тостере реализовано вполне себе нормально. Например по запросу "скролл появление элемента"

Answer 1

[Ridz]

full необязательный параметр, если full = true, функция вернёт true, только когда элемент полностью виден.

function elemInViewport(elem,full) {
    var box = elem.getBoundingClientRect();
    var top = box.top;
    var left = box.left;
    var bottom = box.bottom;
    var right  = box.right;
    var width = document.documentElement.clientWidth;
    var height = document.documentElement.clientHeight;
    var maxWidth = 0;
    var maxHeight = 0;
    if(full) { maxWidth = right - left; maxHeight = bottom - top};
    return Math.min(height,bottom)- Math.max(0,top) >= maxHeight && Math.min(width,right)- Math.max(0,left)>= maxWidth
}

Comments

[jeruthadam]

А что в return возвращается?

[Ridz]

jeruthadam, возвращает true если элемемент хотябы частично видно (full = false)
вариант использования

$(window).on("scroll", function() {
var elem = document.querySelector(".hot");
var ok = elemInViewport(elem,true)
$(elem).toggleClass("red",ok)
})

Answer 2

[Николай]

Есть экспериментальная технология https://developer.mozilla.org/ru/docs/Web/API/Inte...
пример работы - https://codepen.io/callahad/pen/YxXpyN , но с поддержкой пока плохо работает в хром.

Либо же высчитывать позиционирование элемента какой-нибудь универсальной функцией типа:

getCoord = function (elem)
    {
        var box = elem.getBoundingClientRect();
        var body = document.body;
        var docEl = document.documentElement;
        
        var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
        var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
        
        var clientTop = docEl.clientTop || body.clientTop || 0;
        var clientLeft = docEl.clientLeft || body.clientLeft || 0;
        
        var top  = box.top +  scrollTop - clientTop;
        var left = box.left + scrollLeft - clientLeft;
        
        return { top: Math.round(top), left: Math.round(left) };

    };

ну и путем сравнения с видимой областью узнать виден элемент или нет.

Comments

[jeruthadam]

53% IntersectionObserver это печально!

[jeruthadam]

Что подразумеваете под "сравнение с видимой областью"? МОжно чуть подробнее?

[Николай]

jeruthadam,

53% IntersectionObserver это печально!

Верим. Надеемся. Ждем.

Ну если чуть подробнее, то viewport мы получаем как-то так

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

Дальше узнаем насколько документ проскролен от top и left плюс высота и ширина veiwport'a соответственно и сравнивая с позицией элемента получаемой по функции выше можно узнать попал он во viewport или нет.

Answer 3

[Никита]

https://github.com/protonet/jquery.inview

Comments

[jeruthadam]

Где была речь о jQuery? Я его не использую

[Никита]

jeruthadam, но и речи о том, что надо без жиквери тоже не было

[jeruthadam]

Никита, потому что jQuery это частный случай. О котором бы упомянули отдельно.