Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8780

iOS対応、スムーズな背景画像の連動。

$
0
0

こんにちは、絶賛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


Viewing all articles
Browse latest Browse all 8780

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>