【JavaScript】一定時間スクロールされなかったらポップアップを表示する方法

<!-- 最初は hidden で非表示にしておく -->
<div id="idle-popup" class="idle-popup" role="dialog" aria-modal="false"
     aria-labelledby="idle-popup-title" hidden>
  <p id="idle-popup-title">あなたへのおすすめ記事をピックアップしました</p>
  <a href="/campaign/" class="idle-popup__cta">詳しく見る</a>
  <button type="button" class="idle-popup__close" data-close aria-label="閉じる">&times;</button>
</div>

.idle-popup {
  position: fixed;
  right: 20px;
  bottom: 20px;
  max-width: 320px;
  padding: 20px 24px;
  background: #1e293b;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  z-index: 1000;
}
.idle-popup[hidden] { display: none; }   /* hidden を確実に効かせる */
.idle-popup__close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: none;
  color: #cbd5e1;
  font-size: 18px;
  cursor: pointer;
}

const popup = document.getElementById("idle-popup");
const idleTime = 10000; // 10秒（ミリ秒）
let timer;

function showPopup() {
  popup.hidden = false;
}

function resetTimer() {
  clearTimeout(timer);
  timer = setTimeout(showPopup, idleTime);
}

resetTimer(); // 初回セット

// スクロールのたびにリセット（passive: true でスクロール性能を確保）
window.addEventListener("scroll", resetTimer, { passive: true });

const popup = document.getElementById("idle-popup");
const idleTime = 10000;
let timer;

// 「操作あり」とみなすイベント一覧
const ACTIVITY_EVENTS = ["scroll", "mousemove", "keydown", "click", "touchstart"];

function showPopup() {
  popup.hidden = false;
}

function resetTimer() {
  clearTimeout(timer);
  timer = setTimeout(showPopup, idleTime);
}

// すべての操作イベントでタイマーをリセット
ACTIVITY_EVENTS.forEach(function (type) {
  window.addEventListener(type, resetTimer, { passive: true });
});

resetTimer();

const STORAGE_KEY = "idlePopupShown";

function showPopup() {
  // すでに表示済みなら何もしない
  if (sessionStorage.getItem(STORAGE_KEY)) return;

  popup.hidden = false;
  sessionStorage.setItem(STORAGE_KEY, "1"); // このセッションでは再表示しない
}

function isScrollable() {
  // ページの高さがビューポート + 余白より大きいか
  return document.documentElement.scrollHeight > window.innerHeight + 100;
}

function resetTimer() {
  clearTimeout(timer);
  if (!isScrollable()) return; // 短いページでは作動させない
  timer = setTimeout(showPopup, idleTime);
}

function closePopup() {
  popup.hidden = true;
}

// 閉じるボタン
popup.querySelector(".idle-popup__close").addEventListener("click", closePopup);

// ESC キーでも閉じる
document.addEventListener("keydown", function (e) {
  if (e.key === "Escape") closePopup();
});

class IdlePopup {
  constructor(target, options = {}) {
    this.el = typeof target === "string"
      ? document.querySelector(target)
      : target;
    this.idleTime   = options.idleTime ?? 10000;
    this.events     = options.events ?? ["scroll", "mousemove", "keydown", "touchstart"];
    this.storageKey = options.storageKey ?? "idlePopupShown";
    this.storage    = options.storage ?? sessionStorage; // localStorage に差し替え可
    this.timer = null;
    this._reset = this.reset.bind(this);
    this.init();
  }

  init() {
    if (!this.el) return;
    if (this.storage.getItem(this.storageKey)) return; // 表示済みなら何もしない
    if (!this.isScrollable()) return;                   // 短すぎるページは対象外

    this.events.forEach((t) =>
      window.addEventListener(t, this._reset, { passive: true })
    );
    this.reset();

    const closeBtn = this.el.querySelector("[data-close]");
    if (closeBtn) closeBtn.addEventListener("click", () => this.hide());
    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape") this.hide();
    });
  }

  isScrollable() {
    return document.documentElement.scrollHeight > window.innerHeight + 100;
  }

  reset() {
    clearTimeout(this.timer);
    this.timer = setTimeout(() => this.show(), this.idleTime);
  }

  show() {
    this.el.hidden = false;
    this.storage.setItem(this.storageKey, "1");
    this.teardown(); // 表示後は監視をやめる
  }

  hide() {
    this.el.hidden = true;
  }

  teardown() {
    clearTimeout(this.timer);
    this.events.forEach((t) =>
      window.removeEventListener(t, this._reset)
    );
  }
}

// 使い方：閉じるボタンに data-close を付けておく
new IdlePopup("#idle-popup", { idleTime: 10000 });