【JavaScript】ページを自動スクロールさせる方法｜requestAnimationFrame・速度制御・一時停止・ループ・アクセシビリティまで解説

let scrollInterval = null;

function startAutoScroll(speed = 2) {
  if (scrollInterval) return; // 二重起動防止
  scrollInterval = setInterval(() => {
    window.scrollBy({ top: speed, behavior: 'instant' });

    // ページ末尾に到達したら停止
    const scrolledToBottom =
      window.scrollY + window.innerHeight >= document.body.scrollHeight - 1;
    if (scrolledToBottom) stopAutoScroll();
  }, 16); // 約60fps
}

function stopAutoScroll() {
  clearInterval(scrollInterval);
  scrollInterval = null;
}

// 使用例
startAutoScroll(3); // 1フレームに3px下へスクロール

class AutoScroller {
  #rafId      = null;   // rAF のID（キャンセルに使う）
  #running    = false;  // 実行中フラグ
  #speed      = 1;      // 1フレームのスクロール量（px）
  #direction  = 1;      // 1=下 / -1=上
  #loop       = false;  // 末尾に達したらループするか
  #target     = window; // スクロール対象（window or 要素）

  constructor({ speed = 1, direction = 1, loop = false, target = window } = {}) {
    this.#speed     = speed;
    this.#direction = direction;
    this.#loop      = loop;
    this.#target    = target;
  }

  get isRunning() { return this.#running; }

  /** スクロールを開始する */
  start() {
    if (this.#running) return;
    this.#running = true;
    this.#tick();
  }

  /** スクロールを一時停止する */
  pause() {
    this.#running = false;
    if (this.#rafId !== null) {
      cancelAnimationFrame(this.#rafId);
      this.#rafId = null;
    }
  }

  /** 一時停止から再開する */
  resume() {
    if (this.#running) return;
    this.#running = true;
    this.#tick();
  }

  /** スクロールを停止して位置をリセット */
  stop() {
    this.pause();
    this.#scrollTo(0);
  }

  /** 速度を動的に変更する */
  setSpeed(speed) { this.#speed = speed; }

  // --- private ---

  #tick() {
    if (!this.#running) return;

    const t = this.#target;
    const isWindow = t === window;
    const scrollTop    = isWindow ? window.scrollY          : t.scrollTop;
    const scrollHeight = isWindow ? document.body.scrollHeight : t.scrollHeight;
    const clientHeight = isWindow ? window.innerHeight       : t.clientHeight;
    const maxScroll    = scrollHeight - clientHeight;

    const next = scrollTop + this.#speed * this.#direction;

    if (next >= maxScroll) {
      // 末尾に到達
      if (this.#loop) {
        this.#scrollTo(0); // 先頭に戻ってループ
      } else {
        this.#scrollTo(maxScroll);
        this.#running = false;
        return;
      }
    } else if (next <= 0) {
      // 先頭に到達（方向が上の場合）
      if (this.#loop) {
        this.#scrollTo(maxScroll); // 末尾に戻ってループ
      } else {
        this.#scrollTo(0);
        this.#running = false;
        return;
      }
    } else {
      this.#scrollTo(next);
    }

    this.#rafId = requestAnimationFrame(() => this.#tick());
  }

  #scrollTo(pos) {
    if (this.#target === window) {
      window.scrollTo({ top: pos, behavior: 'instant' });
    } else {
      this.#target.scrollTop = pos;
    }
  }
}

// ページ全体を自動スクロール（速度2px/frame、末尾でループ）
const scroller = new AutoScroller({ speed: 2, loop: true });
scroller.start();

// ボタンで一時停止・再開
document.getElementById('pauseBtn').addEventListener('click', () => {
  scroller.isRunning ? scroller.pause() : scroller.resume();
});

// ユーザーが触ったら一時停止
window.addEventListener('wheel',     () => scroller.pause(), { passive: true });
window.addEventListener('touchstart', () => scroller.pause(), { passive: true });
window.addEventListener('keydown',   () => scroller.pause());

const scroller = new AutoScroller({ speed: 1, loop: true });
scroller.start();

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    scroller.pause();  // タブが非表示になったら停止
  } else {
    scroller.resume(); // タブに戻ったら再開
  }
});

// AutoScroller を横スクロール用に拡張するシンプル版
class HorizontalScroller {
  #rafId  = null;
  #running = false;
  #speed  = 1;
  #target = null;

  constructor(element, speed = 1) {
    this.#target = element;
    this.#speed  = speed;
  }

  start() {
    if (this.#running) return;
    this.#running = true;
    this.#tick();
  }

  pause() {
    this.#running = false;
    if (this.#rafId) { cancelAnimationFrame(this.#rafId); this.#rafId = null; }
  }

  #tick() {
    if (!this.#running) return;
    const el = this.#target;
    const max = el.scrollWidth - el.clientWidth;
    el.scrollLeft = Math.min(el.scrollLeft + this.#speed, max);
    if (el.scrollLeft >= max) { this.#running = false; return; }
    this.#rafId = requestAnimationFrame(() => this.#tick());
  }
}

// 使用例: #scrollContainer を横に自動スクロール
const hScroller = new HorizontalScroller(
  document.getElementById('scrollContainer'), 2
);
hScroller.start();

const container = document.getElementById('newsTicker');

const ticker = new AutoScroller({
  speed:     1,
  loop:      true,
  target:    container,
  direction: 1,
});

ticker.start();

// ホバーで一時停止（ニュースティッカーでよく使うパターン）
container.addEventListener('mouseenter', () => ticker.pause());
container.addEventListener('mouseleave', () => ticker.resume());

<div id="newsTicker" style="height: 200px; overflow: hidden; position: relative;">
  <ul>
    <li>お知らせ1: 新機能をリリースしました</li>
    <li>お知らせ2: メンテナンスのお知らせ</li>
    <li>お知らせ3: キャンペーン開催中</li>
    <!-- 繰り返し要素を追加してループ感を演出 -->
  </ul>
</div>

class BounceScroller {
  #rafId     = null;
  #running   = false;
  #speed     = 1;
  #direction = 1; // 1=下向き / -1=上向き

  constructor(speed = 1) { this.#speed = speed; }

  start() {
    if (this.#running) return;
    this.#running = true;
    this.#tick();
  }

  pause() {
    this.#running = false;
    if (this.#rafId) { cancelAnimationFrame(this.#rafId); this.#rafId = null; }
  }

  #tick() {
    if (!this.#running) return;

    const maxScroll = document.body.scrollHeight - window.innerHeight;
    const next = window.scrollY + this.#speed * this.#direction;

    if (next >= maxScroll) {
      window.scrollTo({ top: maxScroll, behavior: 'instant' });
      this.#direction = -1; // 上向きに折り返す
    } else if (next <= 0) {
      window.scrollTo({ top: 0, behavior: 'instant' });
      this.#direction = 1;  // 下向きに折り返す
    } else {
      window.scrollTo({ top: next, behavior: 'instant' });
    }

    this.#rafId = requestAnimationFrame(() => this.#tick());
  }
}

const bouncer = new BounceScroller(2);
bouncer.start();

const scroller = new AutoScroller({ speed: 1, loop: true });
scroller.start();

// range スライダーで速度を変更
const speedSlider = document.getElementById('speedSlider');
speedSlider.addEventListener('input', (e) => {
  scroller.setSpeed(Number(e.target.value));
});

<label for="speedSlider">スクロール速度:
  <input type="range" id="speedSlider" min="0.5" max="10" step="0.5" value="1">
</label>
<button id="pauseBtn">一時停止 / 再開</button>

const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

const scroller = new AutoScroller({ speed: 2, loop: true });

if (!prefersReduced) {
  scroller.start(); // モーションを許可している場合のみ開始
}

// 設定変化も検知する
window.matchMedia('(prefers-reduced-motion: reduce)')
  .addEventListener('change', (e) => {
    if (e.matches) {
      scroller.pause(); // 動きを減らす設定に切り替えたら停止
    }
  });