iPad版機能で、スクロール量の取得・設定が出来ない問題の一例 #JavaScript

IE版のパッケージで使われている機能を、iPad版でも実現する為に、同様にスクロール量の取得・設定の記述をしたが、スクロール量が取れず0を返し、また、取れるようになってからも設定の際にも苦戦した話。

一般的なスクロール量の取得

まず、スクロールされた量を取得するための記述は、一般的？なのは調べるとこのくらいは、すぐに出てくる。

■FireFox、IE

document.documentElement.scrollLeft  //横軸のスクロール量
document.documentElement.scrollTop   //縦軸のスクロール量

■Chrome、Safari

document.body.scrollLeft  //横軸のスクロール量
document.body.scrollTop   //縦軸のスクロール量

上手くいかない原因は？

一般的な方法では0を返し、いろんな要素や方法で試しても取れる見込みが立たなかった。
要素の指定方法が原因ではないと思い、エラーを中心にググっていく中で私の問題に該当しそうな記事を見つけた。結果としては、以下の記事と同じ原因であった。
→ document.body.scrollTopが常に0を返す謎を調べてみた

じゃあ、どうすれば良いのか?

スクロール対象の子要素にidを指定して、そのidから取得・設定することで解決した。

まず、スクロール対象の範囲のタグにidで取得する為の名前を設定。今回は、id="scrollList"とした。
それを取得する処理は、次のようになる。

/* 横軸、縦軸の取得 */
function getPositon(){
    var left = document.getElementById("scrollList").scrollLeft;
    var top = document.getElementById("scrollList").scrollTop;

    return [left,top];
}

上記の設定で、スクロール量は取得できるようにはなった。
しかし、今度は、そのスクロール量の箇所に移動しない問題が発生した。
設定の際に、document.getElementById("scrollList").scrollLeft = left;では取得できず、下記のようにすることで、移動できた。

/* 再表示後のスクロール位置の設定 */
function movePosition(left ,top ){
    var listPosition= document.getElementById("scrollList");
    listPosition.scrollLeft = left;
    listPosition.scrollTop = top;
}

IE版では、getElementByIdの指定に直接代入できたが、iPad版では一度、変数にセットしないと代入出来ないようだ。