IEで固定背景画像がガッタガタになる場合
こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。
背景画像が固定してあり、スクロール中に要素が背景画像の上を這っていく…そんなサイト、一度は誰もが見たことがあると思います。
いわゆるパララックスサイトというのでしょうか。
最近知ったんですが、背景を完全固定しているのもパララックスの一種のようです。
というかむしろ一番シンプルなパララックス効果なのかな？
イメージとしては要素毎にスクロールスピードが異なってるものをパララックスというものだと思ってました。
ちなみに前者も後者もこのサイトでは一応取り入れています。
ファーストビューの丸い円（2018/05/07現在）と、contact部分の背景画像です。
んでこのパララックス効果ですが比較的最近、というか近年のテクニックのため、結構IEと相性が悪い。
まあIEなんて消えゆくブラウザは気にしなければいいじゃん、とも思うんですが、やはり何事も勉強です。
IEだとCSSで固定した背景画像がガックガクのブッルブル
IEでパララックス効果がうまく動作しない例として、固定背景画像がガクガクブルブルするという問題があります。
原因はIEのブラウザ機能「スムーズスクロール」
らしいです。じゃあどうするか。
と調べていたらなかなかに強引な方法を見つけました。
問答無用。「スムーズスクロール」を強制的に無効
JavaScriptでIEかどうかを判定して「スムーズスクロール」を強制的に無効する男らしいコードがこちらです。
冒頭のif文でIEかどうかを判定、マウスホイールしたらイベントを発火します。
スクロール量とマウスホイールの移動量を基にscrollToで移動させて恐らく疑似的に「スムーズスクロール」を無効化しているものと思われます。
スクロールの滑らかさ（ブラウザ側の挙動）はやや失われますが、ぼくはこの方法にしてみました。
