CSSのみでスクロールできそうな雰囲気を出す

HTMLでElement内でスクロールさせるUIが必要になったけれど、Macやスマホだとスクロールバーは消えるスクロールできるの気づきにくい。という問題があったので、CSSのみでできる方法を考えていた。

解決方法そのものが出てきてしまったけど、すぐに理解するにはCSS力が足りなかったので、分解しつつ理解したメモです。

元ネタ

元ネタの人が本出してて評判良いので読んでみたい。翻訳版ないけど…

本来は背景色が白だけど、影を隠す要素を見やすくするために色付けしてる。

元のCSSの定義順に、背景1〜4とすると、

背景3,4
- 影っぽい見た目の背景
- background-attachment: scroll で、Elementのスクロール位置ではなく、ページ内のElementの位置に追従する
背景1, 2
- 影を隠すための背景
  - background の重ねがけは、定義順で上位レイヤーになる仕組みを利用
- background-attachment: local で、Elementのスクロールに追従する
- 重なりと追従のおかげで、スクロール位置がトップかボトムにあると影が隠れる

について、知らなかったので読んでみた。

fixed with respect to the page box

Note that there is only one viewport per view

Viewportに対して固定されるので、もし背景3,4に設定してしまうと、Viewportのボトムにない限り影が見えないことになる

fixed with regard to the element itself and does not scroll with its contents

Elementの背景として表示されて、内包するElementがスクロール可能でも追従しない

the background scrolls with the element’s contents

Element内でのスクロール位置に追従する

スクロール範囲とBorderの関係についても触れられてるけど、今回は省略

CSSすげー

CSSで色々作れる人すげー