もう悩まない！要素をスムーズにスクロールさせる！ JavaScriptとCSSでできる「ScrollIntoView()」の使い方

2024-06-09

JavaScriptとCSSにおける「ScrollIntoView()がページ全体を移動させる問題」の解決策

この問題は、主に以下の2つの原因で起こります。

要素の高さがウィンドウの高さを超えている場合: 要素の高さがウィンドウの高さを超えている場合、ScrollIntoView()メソッドは要素全体を可視領域に収めるためにページ全体をスクロールしてしまう可能性があります。
親要素がoverflow: hidden; に設定されている場合: 要素の親要素に overflow: hidden; が設定されている場合、ScrollIntoView()メソッドは親要素のスクロールバーのみを操作し、ページ全体を移動しない場合があります。

これらの問題を解決するには、以下の対策が有効です。

対策1：要素の高さを制限する

要素の高さをウィンドウの高さを下回るように制限することで、ページ全体が移動してしまう問題を回避できます。要素の高さを制限するには、CSSの max-height プロパティを使用します。

.element {
  max-height: 500px;
}

対策2：overflow: auto; を設定する

要素の親要素に overflow: auto; を設定することで、要素が親要素の高さを超えた場合にスクロールバーを表示し、ページ全体を移動せずに要素のみをスクロールできます。

.parent {
  overflow: auto;
}

対策3：オプション引数を使用する

ScrollIntoView()メソッドには、オプション引数として behavior プロパティを指定することで、スクロール動作を制御できます。behavior プロパティに "smooth" を指定すると、スムーズなスクロールを実現できます。

element.scrollIntoView({ behavior: "smooth" });

上記以外にも、以下の点に注意することで、問題を回避しやすくなります。

要素をできるだけ軽量にする
画像の最適化を行う
不要な要素を非表示にする

これらの対策を組み合わせることで、ScrollIntoView()メソッドによるページ全体移動問題を効果的に解決することができます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ScrollIntoView() サンプル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>長いタイトル</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur euismod, quam at semper tincidunt, lectus enim dictum lorem, eget laoreet purus metus at dui. Donec sed lorem sit amet leo faucibus pretium. Sed sed dolor ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed non est nisi. Praesent tincidunt diam sit amet nibh hendrerit, quis consectetur magna semper. Nam et elit et lectus varius ultricies sit amet eget velit. Morbi non diam euismod, semper arcu at, mollis magna. Donec laoreet purus metus, at semper tincidunt lectus ultrices vel.</p>
    <button id="scrollToButton">スクロール</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS

.container {
  height: 500px;
  overflow: auto;
}

.element {
  max-height: 300px;
  margin-bottom: 20px;
}

JavaScript

const scrollToButton = document.getElementById('scrollToButton');
const element = document.querySelector('.element');

scrollToButton.addEventListener('click', () => {
  element.scrollIntoView({ behavior: 'smooth' });
});

このコードでは、以下の対策を実装しています。

要素の高さを max-height プロパティで制限
scrollIntoView()メソッドに behavior: 'smooth' オプションを指定

これらの対策により、要素がウィンドウの高さを超えていても、ページ全体が移動することなく、要素のみをスムーズにスクロールすることができます。

このコードを参考に、ご自身の状況に合わせて調整してください。

ScrollIntoView() の代替方法

requestAnimationFrame() 関数を使用して、ブラウザの再描画タイミングに合わせてスクロールを実行することで、スムーズなスクロールを実現できます。

const element = document.querySelector('.element');

function scrollToElement() {
  const scrollTop = element.offsetTop - (window.innerHeight - element.offsetHeight) / 2;
  window.scrollTo({
    top: scrollTop,
    behavior: 'smooth'
  });
}

scrollToButton.addEventListener('click', () => {
  requestAnimationFrame(scrollToElement);
});