CSSだけのスクロールパラパラ
positionプロパティで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
を指定します。
これで、iPhoneでもAndroidでもちゃんとパラパラするようになりました!
あとはこれを、background-attachmentプロパティに対応していない、iPhone全般と、Android(ただしChrome)にだけ、適用されるようにすればよいわけですね。
iPhoneやAndroidを振り分けるため、前述の「未対応のブラウザだけJavaScriptにする」の項と同じく、ユーザーエージェントでブラウザを判別する方法を使うことにします。ここでは、iPhone全般と、Android(ただしChrome)の時だけ、目印として、unsupported
というclassを付けます。
ul要素にunsupported
というclassが付いていない場合は、li要素の背景をbackground-attachment
で固定配置する方法を適用して、unsupported
というclassが付いている場合は、li要素の擬似要素をposition: fixed
で固定配置する方法を適用するようにすれば、できあがり!
※ただし、デスクトップでユーザーエージェントだけ切り替えて表示した場合には、イラストが全部ハミ出して表示されます…X(。
ul要素にunsupported
というclassが付いてなかったらli要素の背景で、付いてたらli要素の擬似要素と分けてることで、なんだかCSSが無駄に増えちゃってますね…。
ここは、どちらの時もli要素の擬似要素にイラストを表示することにして、unsupported
というclassが付いてなかったらbackground-attachmentプロパティでfixed
にして、付いてたらpositionプロパティでfixed
にする、という風にします。
うん、だいぶCSSがすっきりしましたー;D。