ユーザーがページを開いた後に何もアクション（特にスクロール）をしないまま一定時間が経過した場合に、注目コンテンツやお知らせなどのポップアップを表示したいケースがあります。この記事では、JavaScriptを使って「一定時間スクロールがなかったときにポップアップを表示する」方法を解説します。
基本の仕組み
以下の条件でポップアップを表示する処理を実装します。
- ページ読み込み後からカウントを開始
- ユーザーがスクロールしたらタイマーをリセット
- 一定時間（例：10秒）スクロールされなければポップアップを表示
HTML：ポップアップの土台
まず、表示させるポップアップのHTMLを用意します。
<div id="popup" style="display: none; position: fixed; bottom: 20px; right: 20px; background: #333; color: #fff; padding: 20px; border-radius: 8px; z-index: 1000;">
キャンペーン情報をチェック！
<button onclick="closePopup()">閉じる</button>
</div>JavaScript：スクロールなしでポップアップ表示
次に、スクロールの有無を監視して、一定時間無動作ならポップアップを表示するJavaScriptを記述します。
let scrollTimer;
let idleTime = 10000; // 10秒（10000ミリ秒）
function showPopup() {
document.getElementById('popup').style.display = 'block';
}
function closePopup() {
document.getElementById('popup').style.display = 'none';
}
// タイマーをリセット
function resetTimer() {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(showPopup, idleTime);
}
// 初回タイマーセット
resetTimer();
// スクロールイベントでタイマーリセット
window.addEventListener('scroll', resetTimer);発展：一度表示したら再表示しないようにする方法
一度ポップアップを表示したら、同じセッション内ではもう表示しないようにしたい場合は、フラグを使って制御します。
let hasPopupShown = false;
function showPopup() {
if (!hasPopupShown) {
document.getElementById('popup').style.display = 'block';
hasPopupShown = true;
}
}まとめ
ユーザーがスクロールしない＝「ページを読んでいない・迷っている」可能性があります。そのタイミングでポップアップを表示することで、ユーザーのアクションを促す導線を作ることができます。
シンプルなコードで導入可能なので、ぜひサイトの目的に合わせてカスタマイズしてみてください。
