document.body.scrollLeft クロスブラウザ対応(FireFox)

Question

Firefoxでbody要素のscrollleftプロパティに代入しても、
document.bodyのscrollLeftの値が0になってしまいます。

scrollLeftに値を代入したい場合どのような方法で行えばよいのでしょうか。
よろしくお願いいたします。

HTML要素やDIV要素ではなく、body要素で実行したいです。

// 行いたいコード
document.body.scrollLeft  = 805;
document.body.pageXOffset = 805;

Answer 1

どの要素がルートになるかはページのレンダリングモードに依存します。
標準準拠モードの場合は document.documentElement、後方互換モードの場合は document.body になります。これらは document.compatMode を参照することで取得できます。

// ルート要素を取得
var root = document.compatMode === "CSS1Compat" ? document.documentElement : document.body;

// スクロール位置を変更
root.scrollLeft = 805;

といいたいところですが……この仕様に WebKit 系の Chrome や Safari は準拠していません。これは Firefox と IE が正しい挙動です。

// 標準準拠モードの場合

// Firefox/IE でのみスクロールする
document.documentElement.scrollLeft = 805;

// Chrome/Safari でのみスクロールする
document.body.scrollLeft = 805;

さらに window.pageYOffset は読み取り専用のプロパティであるためスクロール位置を変更することはできません。

ウィンドウ内のスクロール位置については、取得ではなく変更であれば window.scrollTo または window.scrollBy を使用することがおすすめです。

Comments

[退会済みユーザー]

無事解決できました。ありがとうございます！