5つのステップでJavaScriptスクロールをマスター!

JavaScriptでスクロールを制御する方法JS
この記事は約10分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptスクロールを使いこなすことができるようになります。

スクロール機能を使って、ウェブサイトをより使いやすく魅力的にしましょう。

【JavaScriptスクロールとは】

JavaScriptスクロールとは、ウェブサイトのスクロール操作を制御するために使用されるJavaScriptの機能です。

スクロールには、縦方向と横方向のスクロールがあります。

○スクロールの種類

  1. 縦方向スクロール: ウェブページを上下にスクロールすること
  2. 横方向スクロール: ウェブページを左右にスクロールすること

【JavaScriptスクロールの基本】

スクロール操作を検出し、スムーズなスクロールを実現する方法を紹介します。

○サンプルコード1:スクロールイベントの検出

スクロールイベントを検出するには、下記のコードを使用します。

window.addEventListener('scroll', function() {
  console.log('スクロールイベントが発生しました。');
});

このコードは、ウェブページがスクロールされるたびにコンソールにメッセージを表示します。

○サンプルコード2:スムーズスクロールの実装

スムーズスクロールを実現するためには、下記のコードを使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スムーズスクロール</title>
  <style>
    section {
      height: 100vh;
    }
  </style>
</head>
<body>
  <section id="section1">セクション1</section>
  <section id="section2">セクション2</section>
  <section id="section3">セクション3</section>

  <script>
    document.querySelectorAll('section').forEach(function (section) {
      section.addEventListener('click', function () {
        const targetId = this.id;
        const target = document.getElementById(targetId);
        target.scrollIntoView({ behavior: 'smooth' });
      });
    });
  </script>
</body>
</html>

このコードは、各セクションをクリックすると、スムーズにスクロールしてそのセクションに移動します。

【JavaScriptスクロールの応用例】

ここでは、ページトップへ戻るボタンやスクロールに応じたアニメーションの実装方法を紹介します。

○サンプルコード3:ページトップへ戻るボタン

ページトップへ戻るボタンを実装するには、下記のコードを使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページトップへ戻るボタン</title>
  <style>
    #toTop {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: none;
    }
  </style>
</head>
<body>
  <div style="height: 2000px;">長いコンテンツ</div>
  <button id="toTop">トップへ戻る</button>

  <script>
    const toTop = document.getElementById('toTop');

    window.addEventListener('scroll', function () {
      if (window.pageYOffset > 300) {
        toTop.style.display = 'block';
      } else {
        toTop.style.display = 'none';
      }
    });

    toTop.addEventListener('click', function () {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  </script>
</body>
</html>

このコードは、スクロールが一定量を超えると「トップへ戻る」ボタンが表示され、クリックするとスムーズにページトップへ戻ります。

○サンプルコード4:スクロールに応じたアニメーション

スクロールに応じてアニメーションを実行するには、下記のコードを使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スクロールに応じたアニメーション</title>
  <style>
    .fade-in {
      opacity: 0;
      transition: opacity 1s;
    }
    .show {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div style="height: 1000px;">スクロールして下さい</div>
  <div id="animated" class="fade-in">アニメーション対象の要素</div>

  <script>
    const animated = document.getElementById('animated');

    window.addEventListener('scroll', function () {
      const windowHeight = window.innerHeight;
      const targetTop = animated.getBoundingClientRect().top;

      if (targetTop < windowHeight) {
        animated.classList.add('show');
      }
    });
  </script>
</body>
</html>

このコードは、対象の要素が表示領域に入るとフェードインアニメーションを実行します。

【注意点と対処法】

JavaScriptでスクロール操作を扱う際の注意点と対処法を説明します。

  1. スクロールイベントは頻繁に発生するため、パフォーマンスに影響が出ることがあります。
    そのため、requestAnimationFrameを使って処理を最適化することが推奨されます。
    また、throttledebounce関数を使用してイベントの発火回数を制限することも効果的です。
  2. スクロール位置の取得方法にはブラウザ間で差異があります。
    window.pageYOffsetdocument.documentElement.scrollTopなど、複数のプロパティを使ってスクロール位置を取得することで、ブラウザ間の互換性を保ちます。

【カスタマイズ方法】

スクロール操作をカスタマイズする方法を2つ紹介します。

○サンプルコード5:スクロール速度の調整

スクロール速度を調整するには、下記のコードを使用します。

function smoothScroll(target, duration) {
  const targetPosition = target.getBoundingClientRect().top;
  const startPosition = window.pageYOffset;
  const distance = targetPosition;
  let startTime = null;

  function animation(currentTime) {
    if (startTime === null) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const progress = timeElapsed / duration;
    const easedProgress = progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2;
    window.scrollTo(0, startPosition + distance * easedProgress);

    if (timeElapsed < duration) {
      requestAnimationFrame(animation);
    }
  }

  requestAnimationFrame(animation);
}

document.querySelector('button').addEventListener('click', function () {
  const target = document.querySelector('#target');
  smoothScroll(target, 1000);
});

このコードでは、指定した要素へのスクロールを、指定した時間内にスムーズに行います。

○サンプルコード6:カスタムスクロールバーの実装

カスタムスクロールバーを実装するには、下記のコードを使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カスタムスクロールバー</title>
  <style>
    .scroll-container {
      position: relative;
      overflow-y: scroll;
      height: 300px;
      width: 200px;
    }

    .scroll-container::-webkit-scrollbar {
      width: 10px;
    }

    .scroll-container::-webkit-scrollbar-thumb {
      background-color: #999;
      border-radius: 5px;
    }

    .scroll-container::-webkit-scrollbar-track {
      background-color: #eee;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="scroll-container">
    <div style="height: 1000px;">長いコンテンツ</div>
  </div>
</body>
</html>

このコードでは、スクロールバーのデザインをカスタマイズしています。

スクロールバーの幅や色、丸みを調整することができます。

まとめ

この記事では、JavaScriptでスクロール操作を行う方法やカスタマイズ方法を解説しました。

下記のポイントを押さえておくと、スクロール操作を簡単に実装できます。

  • スクロール位置の取得はwindow.pageYOffsetdocument.documentElement.scrollTopを使用して、ブラウザ間の互換性を保つ。
  • addEventListenerでスクロールイベントを監視し、スクロール操作を実行する。
  • requestAnimationFramethrottledebounce関数を使用して、パフォーマンスを最適化する。
  • カスタムスクロールバーを実装することで、スクロールバーのデザインを自由にカスタマイズできる。

これらの知識を活用して、より使いやすいウェブページを作成していきましょう。