Home>

jQuery (function ($) {
'use strict';
var inviewObserver = new IntersectionObserver (function (entries, observer) {
entries.forEach (function (entry) {
if (! entry.isIntersecting) return;
var $target = $(entry.target),
delay = 200;
if ($target.hasClass ('js-fv')) {
delay = 800;
}
$target.delay (delay) .queue (function () {
$target.addClass ('is-inview'). dequeue ();
});
observer.unobserve (entry.target);
});

  • Answer # 1

    In vanilla JS (plain JavaScript),
    Since there is a way to take a relative position from the viewport (browser display area),
    I should use it.

    const targetDom = document.querySelector ('Selector for the element to be scrolled');
    $(window) .on ('scroll resize load', function () {
      const rect = targetDom.getBoundingClientRect ();
      if (rect.top<= $(window) .height ()-100&&rect.top>100) {// Numbers are examples
        if (! flg) {
          mySVG.drawsvg ('animate');
          flg = true;
        }
      }
    });

    In the above example, execution is performed when the head of the target element has reached the 100px position from the bottom and is in the range from the top of the viewport to 100px.

Related articles