投稿日:

JavaScriptのScrollTopプロパティについて

今回は、ソースコードを見ていたときに、同じ箇所でscrollTop関連を２つ利用しているのがあったので、その理由とscrollTopがなんなのかについてみていきたいと思います。

2つのScrollTopプロパティとは？

document.documentElement.scrollTop

  • 対象要素: <html>要素（ドキュメントのルート要素）
  • 使用場面: 標準的な方法として、多くのモダンブラウザで推奨
  • 動作: HTMLドキュメント全体のスクロール位置を管理

document.body.scrollTop

  • 対象要素: <body>要素
  • 使用場面: 古いブラウザやQuirksモードで必要
  • 動作: body要素のスクロール位置を管理

なぜ2つ存在するのか？

この混乱の原因は、ブラウザの歴史的な経緯にあります。

昔のInternet ExplorerやQuirksモードでは、スクロールは<body>要素で管理されていました。一方、標準的なブラウザでは<html>要素（documentElement）でスクロールが管理されるようになりました。

実際のコード例

基本的な使用方法

// 現在のスクロール位置を取得
console.log("documentElement:", document.documentElement.scrollTop);
console.log("body:", document.body.scrollTop);

// スクロール位置を設定
document.documentElement.scrollTop = 100;
document.body.scrollTop = 100;

クロスブラウザ対応の実装

// スクロール位置を取得する関数
function getScrollTop() {
　// このように複数記述している
    return window.pageYOffset || 
           document.documentElement.scrollTop || 
           document.body.scrollTop || 
           0;
}

// スクロール位置を設定する関数
function setScrollTop(value) {
    document.documentElement.scrollTop = value;
    document.body.scrollTop = value;
}

// 使用例
console.log("現在のスクロール位置:", getScrollTop());
setScrollTop(200);

推奨アプローチ

window.scrollYを使用

// 取得
const scrollY = window.scrollY || window.pageYOffset;

// 設定
window.scrollTo(0, 100);

// スムーズスクロール
window.scrollTo({ 
    top: 100, 
    behavior: 'smooth' 
});

まとめ

document.body.scrollTopとdocument.documentElement.scrollTopの違いは、ブラウザの歴史的な経緯から生まれた問題です。現代の開発では以下のアプローチを推奨します：

  1. 第一選択: window.scrollYやwindow.pageYOffsetを使用
  2. フォールバック: 両方のプロパティを組み合わせて使用
  3. 設定時: window.scrollTo()を優先的に使用

コメントを残す