【備忘録】「background-attachment: fixed」をスマホでは無効にする方法

こんにちは、ワタナベです！

今回は、「background-attachment: fixed」を使って背景を固定した時に、スマホでは固定を無効にする方法の備忘録です。

「background-attachment: fixed」は背景を固定してくれて簡単にパララックスなコーディングをすることができます。

しかしこの「background-attachment: fixed」は残念なことにiOSだとバグります。

疑似要素を使用した対応方法もありますが、ページにパララックスしたい箇所が複数ある場合はスクロールした際にz-indexの切り替えなどの設定をしなくてはならないので非常にやっかいです。

したがって、スマホでは「background-attachment: fixed」を無効にするのが一番簡単な実装方法となります。

以下が自分が色々試して落ち着いた実装方法です。

固定背景にする要素にcssで直接fixedの設定をするのではなくて、「bg-fixed」というクラスを設定しJSでPC表示の時に「background-attachment: fixed」を付与させます。

これでPCで表示した時だけ背景が固定されます。

個人的にこれが一番楽だったので良ければご参考ください！

それでは皆様良いクリスマス、年末をお過ごしください。

今年もお世話になりました。来年もよろしくお願い致しますm(__)m