こちらのプロパティがiOSやandroidに対応していないようです。
css
1background-attachment: fixed;
参考:
https://caniuse.com/#search=background-attachment
なので、別の方法でbackground-attachment: fixed;
の動きを再現するということになります。
雑で申し訳ありませんが…???? 以下がDEMOです。
- bodyの疑似要素に背景を敷いて、その上にコンテンツをかぶせるとか。
DEMO:
https://codesandbox.io/s/84lxnv1r9j
html
1<h1>Parallax</h1>
2<section>
3 <h2>heading</h2>
4 <p>body</p> <!-- スクロールするくらい並べる -->
5</section>
6<section>
7 <h2>heading</h2>
8 <p>body</p> <!-- スクロールするくらい並べる -->
9</section>
css
1body {
2 margin: 0;
3}
4body:before {
5 content: "";
6 position: fixed;
7 top: 0;
8 left: 0;
9 width: 100vw;
10 height: 100vh;
11 background-image: url("https://picsum.photos/1920/1080");
12 z-index: -1;
13}
14section:nth-of-type(n + 2) {
15 margin-top: 300px;
16}
17h1,
18h2,
19p {
20 background-color: #fff;
21 margin: 0;
22}
- jsでスクロール量を取得してそれをbackground-positionに当てはめるとか。
DEMO:
https://codesandbox.io/s/k96qzzp7wv
html
1<p>body</p> <!-- スクロールするくらい並べる -->
2<div class="parallax1"></div>
3<p>body</p> <!-- スクロールするくらい並べる -->
css
1.parallax1 {
2 position: relative;
3 background-image: url("https://picsum.photos/1920/1080");
4 height: 400px;
5 background-size: auto;
6 background-repeat: no-repeat;
7}
js
1const $target = $(".parallax1");
2const targetHeight = $(".parallax1").height();
3const targetTop = $(".parallax1").offset().top;
4const targetBottom = targetTop + targetHeight;
5const windowHeight = $(window).height();
6
7$(() => {
8 displayInit();
9 $(window).on("scroll", () => {
10 const scrollTop = $(window).scrollTop();
11 const scrollBottom = scrollTop + windowHeight;
12 if (scrollBottom > targetTop && scrollTop < targetBottom) {
13 //画像が画面内に入ったとき
14 const bgPosition = scrollBottom - targetTop;
15 $target.css(`background-position`, `50% ${100 - bgPosition / 10}%`);
16 }
17 });
18});
19
20// 初期表示
21const displayInit = () => {
22 const bgPosition = windowHeight - targetTop;
23 $target.css(`background-position`, `50% ${100 - bgPosition / 10}%`);
24};
※ jQuery使っちゃってます
※ ES6の記法です
他にもアイディア次第でいろいろ解決方法があるかもしれません。
個人的にはjsでやるのが好きです????