【JavaScript】スクロールイベントの使い方｜scroll・scrollY・throttle・IntersectionObserver・スクロール方向検出まで解説

window.addEventListener("scroll", () => {
  console.log("スクロール中:", window.scrollY);
});

const container = document.getElementById("scrollContainer");

container.addEventListener("scroll", () => {
  console.log("要素内スクロール:", container.scrollTop);
});

function throttle(fn, interval) {
  let lastTime = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      fn.apply(this, args);
    }
  };
}

// 100ms ごとに1回だけ実行
window.addEventListener("scroll", throttle(() => {
  console.log("throttled:", window.scrollY);
}, 100));

let ticking = false;

window.addEventListener("scroll", () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      handleScroll(window.scrollY);
      ticking = false;
    });
    ticking = true;
  }
});

function handleScroll(scrollY) {
  // 1フレームに1回だけ実行される
  console.log("rAF:", scrollY);
}

window.addEventListener("scroll", handleScroll, { passive: true });

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
      observer.unobserve(entry.target); // 一度だけ実行
    }
  });
}, {
  threshold: 0.1 // 10% 見えたら発火
});

// 監視対象の要素を登録
document.querySelectorAll(".fade-in").forEach(el => {
  observer.observe(el);
});

let lastScrollY = 0;

window.addEventListener("scroll", throttle(() => {
  const currentY = window.scrollY;

  if (currentY > lastScrollY) {
    console.log("下にスクロール");
  } else if (currentY < lastScrollY) {
    console.log("上にスクロール");
  }

  lastScrollY = currentY;
}, 100));

function getScrollPercentage() {
  const scrollY = window.scrollY;
  const docHeight = document.documentElement.scrollHeight;
  const winHeight = window.innerHeight;
  return Math.round((scrollY / (docHeight - winHeight)) * 100);
}

window.addEventListener("scroll", throttle(() => {
  console.log(getScrollPercentage() + "%");
}, 100));

const header = document.querySelector("header");
let lastScrollY = 0;

window.addEventListener("scroll", throttle(() => {
  const currentY = window.scrollY;

  if (currentY > lastScrollY && currentY > 100) {
    // 下スクロール → ヘッダーを隠す
    header.classList.add("header-hidden");
  } else {
    // 上スクロール → ヘッダーを表示
    header.classList.remove("header-hidden");
  }

  lastScrollY = currentY;
}, 100), { passive: true });

<div id="progress-bar" style="position:fixed;top:0;left:0;height:3px;background:#0284c7;width:0;z-index:9999;transition:width 0.1s;"></div>

const bar = document.getElementById("progress-bar");

window.addEventListener("scroll", () => {
  const pct = getScrollPercentage();
  bar.style.width = pct + "%";
}, { passive: true });

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
    }
  });
}, { threshold: 0.15 });

document.querySelectorAll(".fade-in").forEach(el => observer.observe(el));