Home>

In the process of adding a class name to an element in accordance with scrolling, as shown in the following reference page
I think that it will seem to be a heavy load if it is executed every time there is a scroll event,
Is it a level that you don't need to worry about?

https://qiita.com/AsagiriDesign/items/0ec5623755c1d633bc85

$(window) .scroll (function () {
 $(". animation .anm_mod"). each (function () {
  const position = $(this) .offset (). top;
  const scroll = $(window) .scrollTop ();
  const windowHeight = $(window) .height ();
  if (scroll>position-windowHeight) {
   $(this) .addClass ("active");
  }
  if (scroll<100) {
   $(this) .removeClass ("active");
  }
 });
});

When there are dozens of elements, it seems that it will take a load as it is.
I don't think you'll notice even if you're looking at a site with that implementation.

  • Answer # 1

    As a real problem, it has a significant effect on the scroll feeling. Therefore, the method of cutting out events by time and decimating them is like a standard (reference).

    After that, just set thescrollevent, "The event may generatepreventDefault(if that happens, scrolling needs to stop) "And the scroll will get stuck. Therefore, if you do notpreventDefault, you should register as a passive listener. However, IE11 is not supported, so be careful (Google, reference).