諸場ブラウザではスクロールバーが常時表示されないため,描写部でスクロール可能なことが分かりにくいという問題があったが,これは続きがある方向に内容が溶暗するような効果を付けることで上手く解決しそうだ。線を引く,印を付けるなどよりもさりげなく,直感的に分かりやすい。
諸場でなくても,内容が途中で切れるのが美観的に気になっていたので丁度良い。
これなら描写後略機能も透過的に実現出来る。用者は普通にスクロールを続ける感覚で続きを取得することが出来る。
最初は -webkit-scrollbar 等を適当に設定して済ませるつもりだったが,iOS 13 以降の Safari では無効らしく,代替手段を探していた。結果的にはより洗練された手段が見つかった。
mask-image を使えばこの手の効果を付けるのは簡単だが,スクロールバーにまでマスクがかかってしまうのが気に入らなかった。
linear-gradient() を背景にした独自のマスク要素を作り,位置調整はスクリプトで行うことにした。
急ぐことではないため装体のみ作っておいて終了。