スクロールパラパラ。
CSSだけのスクロールパラパラ
fixed
を指定した要素は、親要素に指定したoverflowプロパティの指定を無視してしまうものと思っていたのだけれど、親要素にposition: relative
と、z-indexプロパティを指定していれば、overflow
がちゃんと効きます!スマホでもCSSだけでパラパラする
子要素がposition: fixed
を指定した要素でも、親要素にposition: relative
とz-indexプロパティを指定していれば、overflowプロパティは、ちゃんと適用されるんです…X‹。
ただし、それだけだとFirefoxとChromeではoverflowプロパティが効かないままなのですけれど、加えてborder-radiusプロパティを指定すれば、Chromeでoverflowプロパティが適用されるようになります(後述)X)!(※それでも、Firefoxでは依然、overflowプロパティは効かないままです…:/)
z-index
の値は、数値ならばなんでも大丈夫なので、ここでは0
を指定します。border-radius
は、0よりも大きい値でないとダメなので、角丸にしてるのがバレないように、ごく小さい値0.1px
を指定します。
#scpr li::after {
z-index: 0;
position: relative;
overflow: hidden;
height: 240px;
margin: 0;
border-radius: .1px;
}
これで、iPhoneでもAndroidでもちゃんとパラパラするようになりました!
※Chrome(73.0.3683.86)でも、border-radius
してもoverflow
が適用されなくなってました…⁑/
iPhone(12.2)のChrome(73.0.3683.68)と、Android(7.0)のChrome(73.0.3683.90)ではちゃんと適用されてるみたいですけれど、デスクトップでは、イラストが全部ハミ出して表示されちゃいます…X(。(2019.4.15追記)
※Xperia(実機)のChromeで見てみたらパラパラしなくなってました…X(。のですけれど、BrowserStackで見るとパラパラしてたので、「スマホでもパラパラしてた頃スクロールパラパラ」を動画で残しておくことにします:‹!(2019.7.2追記)
あとはこれを、background-attachmentプロパティに対応していない、iPhone全般と、Android(ただしChrome)にだけ、適用されるようにすればよいわけですね。
iPhoneやAndroidを振り分けるため、前述の「未対応のブラウザだけJavaScriptにする」の項と同じく、ユーザーエージェントでブラウザを判別する方法を使うことにします。ここでは、iPhone全般と、Android(ただしChrome)の時だけ、目印として、unsupported
というclassを付けます。
const ua = window.navigator.userAgent.toLowerCase();
const isIos = ua.indexOf("iphone") != -1 || ua.indexOf("ipad") != -1;
const isAndroid = ua.indexOf('android') != -1 && ua.indexOf('chrome') != -1;
if (isIos || isAndroid) {
document.getElementById('scpr').classList.add('unsupported');
}
ul要素にunsupported
というclassが付いていない場合は、li要素の背景をbackground-attachment
で固定配置する方法を適用して、unsupported
というclassが付いている場合は、li要素の擬似要素をposition: fixed
で固定配置する方法を適用するようにすれば、できあがり!
#scpr:not(.unsupported) li {
background: #f5f6f8 center / 400px no-repeat fixed;
}
︙
#scpr.unsupported li::after {
content: "";
position: fixed;
︙
background: #f5f6f8 center / 400px no-repeat;
}
※ただし、デスクトップでユーザーエージェントだけ切り替えて表示した場合には、イラストが全部ハミ出して表示されます…X(。(2019.4.15追記)
ul要素にunsupported
というclassが付いてなかったらli要素の背景で、付いてたらli要素の擬似要素と分けてることで、なんだかCSSが無駄に増えちゃってますね…。
ここは、どちらの時もli要素の擬似要素にイラストを表示することにして、unsupported
というclassが付いてなかったらbackground-attachmentプロパティでfixed
にして、付いてたらpositionプロパティでfixed
にする、という風にします。
#scpr li::after {
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f5f6f8 center / 400px no-repeat;
}
#scpr:not(.unsupported) li::after {
position: absolute;
background-attachment: fixed;
}
#scpr.unsupported li::after {
position: fixed;
}
うん、だいぶCSSがすっきりしましたー;D。
Comment & Pingback