iPadでまともにスクロールできない。positionのfixedが原因か？

↻ 2020/4/5

阿部寛的サイト作成に挑戦中。

メインカラムとサイドカラムの両方をposition: fixed; にしてしまうと大きい画面サイズのタブレット端末などのスクロール操作がおぼつかなくなります。

なのでどちらかはposition:relative;にしておいて「普通の操作」が可能にしておいたほうが無難なようです。

しかし、そうしてしまうとPCで見たときにサイドカラムのスクロールバーと本体bodyのスクロールバーがみっちり隣り合ってしまい、なんだか不格好でややこしい感じになります。

実際の操作中としてはスクロールバーなんて触らずにマウスのグリグリやタッチパッドでスルッとやられるのかもしれませんが、やっぱりスクロールバーは要素のすぐ右隣にいてほしいです。

そんだらない拘りのせいで本質的な所を見失っているのは否めませんが、別に構わないのです。今は。今のところは。

position: relative; かつ、スクロールバーを要素の右隣に表示させる方法。

解決策としては、左カラムのメインコンテンツ部の右隣にスクロールバーを表示させたければ、cssでheight100vhを指定しておけば良い。ということがわかりました。

これにて左カラムは通常、右カラムは固定のサイドバーというスタイルが完成します。

しかし、今度はスクロール位置の記憶が大変です。黙ってスクロールバーをbodyに委ねておけばブラウザバックなどの対応もスムーズにやってくれるのですが、左カラムと右カラムをそれぞれ独立させてしまったせいで、自力でコントロールする必要が出てきました。

スクロールバーを左カラム由来にしただけで、一気にやらなくてはいけないことが増えました。

sessionStorage セッションストレージを使います。ローカルストレージでも良いのですが、そこまでする必要性が感じられない上に、ブラウザを閉じたり、別タブに移行しただけで消えるセッションストレージのほうが使い勝手が良いし安全な感じがするので、こちらを採用。

スクロール位置を記憶してブラウザバックなどにも対応。きっちり本来の動きを再現するのは不可能に近いようですが、一般的な操作感覚に収めるぐらいのことはできたと思います。変な違和感はないはず。

そしてもう１つ問題が勃発。

要素を指定の位置へ移動させる element.scrollTo(0, 0)（※またはelement.scroll(0, 0)）がIEに対応していないのです。

window.scrollTo()（※またはwindow.srcoll()）ならばIEでもいけます。しかし、getElementById(‘wrapper’).scrollTo(0, 100)みたいなことができないのです。

今回まさにやりたいのがこれなのですから、かなりショックです。レトロサイトとしてはせめて最低限IE11への対応はしておきたいではありませんか。

頑張ってpolyfill的な対処法を考えるしかありません。

insertAdjacentHTMLが速いらしい、でも今はinnerHTMLとたいして変わらん、という微妙な情報を手に入れました。

ウェブサイトのパフォーマンスは瞬間最大風速よりも通常営業時にいかに滞りなく速いか、ということが重要な気がする昨今です。