こんにちは、絶賛24時間プログラミング中のasuchi0819です。
(んなわけない
ちょっと所要にて、背景画像をスクロールしても動かしたくない実装をしなければならなかったので、その覚書です。
まず、iOSでは背景画像のcover
時にbackground-attachment:fixed;
を指定することはできません。
そこで、:berofe
に背景画像として設定すればよいです。
しかし、ここで少し落とし穴があるのでコードを見てください。
body:before{content:"";display:block;position:fixed;bottom:0;left:0;z-index:-1;width:100%;height:100vh;overflow:hidden;background:url()centerno-repeat;background-size:cover;}
多くのコードでは、bottom: 0;
がtop: 0;
や、overflow: hidden
がなかったりしますが、この二つがないと、スムーズに動作しません。
100vhなので、ツールバーの値の変化を受けることになります。そのため、overflow:hidden
にしておかないと縦方向でのスクロールバーが出現してしまいます。
また、top
ではなく、bottom
でないと、スムーズにいきません。
是非皆さんも試してみてください。
検証機材。
iPadOS 13.3 iPad 6th