[JS] スマホブラウザでズームしてもスクロールしても下に居座り続けるボックスを作る

こんにちは。カイザーです。
今日はJSです。

以前、拡大操作が前提のスマホ用Webサイトに、画面下に固定の情報を置く必要が出てきました。

拡大できないWebサイトや、PCサイトの場合、単にcssで「position: fixed;bottom: 0px;」とするだけでOKなのですが、これだとスマホで拡大するとレイアウトが崩れてしまいます。

これには現状では対応できないようなので、JSで対応しました。

それで、下記を参考に作ってみました。

スマホ対応の参考に。JavaScriptでウェブページがどのくらい拡大されているのかを取得する方法。

実際には「updateInfoPosition()」で「#information」の位置を、現在のスクロール・拡大率を元に更新しています。また、y座標は計算が複雑だったので、「getScrollBottom()」に分けてあります。

また、JSでのDOMを使った描画更新は重いので、タッチ時・ジェスチャー時は「#information」を隠し、それが終わった1秒後に表示するようにしています。1秒間は、スマホブラウザ特有の惰性移動のため、タイマーで待ってもらっています。