wait until scroll is done then execute

Question

Hello I found a code that switches the content of your body when you click a button from this codepen and I would like to add a feature that it waits with switching the content until the page is done scrolling for cross browser support I use this script for my smooth scroll:

    // add event listener on load
        window.addEventListener('load', function() {

  // scroll into view
  var btns = document.querySelectorAll('.scrollwrap');
  for (let i = 0; i < btns.length; i++) {

    btns[i].addEventListener('click', function(e) {
      e.preventDefault();
      document.querySelector('.wrapper').scrollIntoView({
        behavior: 'smooth'
      });
      document.getElementById("wrap").scrollTop -= 100;
    });
  }

I got this script from here.

How can I make it wait until the page is fully scrolled to the set destination?

score 0 · Answer 1 · answered Apr 28 '21 at 10:28

0

I think you can try to catch Event

const wrap = document.getElementById("wrap");
 wrap.addEventListener('scroll', function(e) {
   const lastKnownScrollPosition = wrap.scrollTop;

   Here you can do what you want to do =)
});

answered Apr 28 '21 at 10:28

Andrey Simanovich

1

score 0 · Answer 2 · answered Apr 28 '21 at 10:36

While the page scrolls, if the page has any loading icon or anything indicating new contents loading, you need to get the selector of that icon or whatever. Then do something like this.

var checkExist = setInterval(function() {
if ($('#loadingIcon').length) {
   console.log("Exists!");
   clearInterval(checkExist);
  }
}, 100); // check every 100ms

Refer to this for more information.

To get selector to your loading icon, you will have to pause the dom by pressing F8 and then inspecting the loading icon. Pausing the dom will prevent the icon from disappearing.

wait until scroll is done then execute

2 Answers2