CSS Secret Garden: スクロール Tip_html/css_WEB-ITnose

『CSS Secrets』は、@Lea Verou による最新の本で、CSS に関する小さな秘密を説明しています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

スクロール バーは主に、現在表示されているコンテンツがすべてではなく、スクロールすることでさらに表示できることをユーザーに伝えるために使用されます。ただし、それらは扱いにくく、気が散ってしまう傾向があるため、最新のオペレーティング システムではそれらを簡素化し始めており、多くの場合、ユーザーが実際にスクロール可能な要素を操作するまでは完全に非表示になります。

現在、スクロール バーがスクロールの制御に使用されることはほとんどありませんが (ユーザーはジェスチャーを使用して画面をスライドする傾向があります)、完全には表示されていない要素にさらに多くのコンテンツがあることをユーザーに思い出させ、微妙な方法で情報を伝えることは、次のような場合にも役立ちます。ユーザーが現在操作していない要素。

このボックスの内容は実際には現在表示されているものより多く、スクロール可能です。しかし、対話しなければ、まったく気付かないでしょう。

Google が開発したリーダーである Google Reader (現在は廃止されています) の UX デザイナーは、これを促す非常にエレガントな方法を見つけました。コンテンツが増えると、サイドバーの上部または下部に微妙な影が表示されます。

• 左の画像: 上にスクロール
• 中央の画像: 上下にスクロール
• 右の画像: 下にスクロール

ただし、この効果を実現するために、Google Reader ではかなり多くのスクリプトが使用されています。これは本当に必要ですか? CSS を使用して同じ効果を実現できるでしょうか?

解決策

まず、いくつかの単純な HTML タグ、通常の順序なしリスト、およびいくつかのプレースホルダー コンテンツ (奇妙な名前 orz) から始めます。

<ul>    <li>Ada Catlace</li>    <li>Alan Purring</li>    <li>Schr&ouml;dingcat</li>    <li>Tim Purrners-Lee</li>    <li>WebKitty</li>    <li>Json</li>    <li>Void</li>    <li>Neko</li>    <li>NaN</li>    <li>Cat5</li>    <li>Vector</li></ul>

次に、コンテナを小さくするための基本的なスタイルを適用します。コンテンツよりもスクロールするようにします:

overflow: auto;width: 10em;height: 8em;padding: .3em .5em;border: 1px solid silver;

さて、物事は面白くなり始めます。放射状のグラデーションを使用して、上にシャドウを適用します。

background: radial-gradient(at top, rgba(0,0,0,.2),transparent 70%)            no-repeat;background-size: 100% 15px;

結果は下の画像で確認できます。

現在、最初にスクロールを開始した場所に停止しています。デフォルトでは、背景画像は次のように表示されます。要素がどれだけスクロールされたかに関係なく、背景画像の位置は要素に対して固定されます。これは、background-attachment:fixed を持つ画像にも機能します。それらの唯一の違いは、ページ自体がスクロールされてもその位置に留まるということです。要素の内容に合わせて背景画像をスクロールさせる方法はありますか?

数年前には、この単純なことはほとんど不可能だったでしょう。ただし、問題は明らかです。CSS3 では、background-attachment: local に新しいキーワードが追加されています。

ただし、background-attachment: local では私たちのケースはうまく解決できませんでした。これを影のグラデーションに適用すると、まったく逆の結果が得られます。上までスクロールすると影が表示されますが、下にスクロールすると影が消えます。これはほんの始まりにすぎませんが、方向性を変えていきます。

新しいトリックは 2 つの背景を使用することです。1 つは影を生成するもので、もう 1 つは基本的に影を覆いマスクとして機能する白い長方形です。影の背景には、所定の位置に留まらせたいため、デフォルトの背景添付ファイル (scroll) が付いています。次に、マスクされた背景の背景アタッチメントはローカルであるため、上にスクロールすると影が覆われ、下にスクロールするとコンテンツとともにスクロールして影が表示されます。

線形グラデーションを使用してマスク長方形を作成し、要素の背景と同じ色を保ちます (この例では、色は白です):

background: linear-gradient(white, white),            radial-gradient(at top, rgba(0,0,0,.2),transparent 70%);background-repeat: no-repeat;background-size: 100% 15px;background-attachment: local, scroll;

スクロールのさまざまな段階で下の画像で確認できます。効果。

期待した効果があるように見えることに気づくかもしれませんが、明らかな欠点が 1 つあります。少しスクロールしただけで影が表示される方法が非常に途切れ途切れで扱いにくいです。滑らかにする方法はありますか？

左の画像: 一番上までスクロールします
中央の画像: ゆっくり下にスクロールします
右の画像: 素早く下にスクロールします

「マスク」の背景が実際には線形グラデーションであるという事実を利用して、それを変換できます白から透明な白への線形グラデーション ( hsla(0,0%,100%,0) または rgba(255,255,255,0) ) に変換すると、影が非常にスムーズに表示されます。

background: linear-gradient(white, hsla(0,0%,100%,0)),            radial-gradient(at top, rgba(0,0,0,.2),transparent 70%);

为什么是白色渐变而不是直接一个 transparent 呢？后者实际上是 rgba(0,0,0,0) 的别名，这样如果它是从不透明白色到透明黑色的过渡的话，渐变可能包含灰色阴影。如果浏览器是通过premultiplied RGBA space插入颜色，这应该不会发生。不同的插值算法是这本书范围之外的内容，但是在网上有大量的资料可以查看。

这是朝着正确方向迈出的一步~~如图所示，

它的阴影确实是逐渐显示的，和我们的期望相符。但是，它目前有一个非常严重的缺陷：当我们滚动到顶部的时候，它就不能像之前那样把阴影覆盖掉了。我们可以通过把 white 色标下移一些（ 15px 是精确值，和我们阴影的高度值一致）来解决这个事情，这样在开始褪色之前我们就可以得到一块纯白色的区域，正好将阴影完全覆盖。此外，我们需要增加蒙版背景的大小，让它比阴影大，否则我们就得不到渐变。确切的高度取决于我们希望效果的平滑度是多少（比如说，当我们滚动的时候，阴影显示的快慢？）经过试验， 50px 是一个合理值。最后的代码如下所示：

background: linear-gradient(white 30%, transparent),            radial-gradient(at 50% 0, rgba(0,0,0,.2),transparent 70%);background-repeat: no-repeat;background-size: 100% 50px, 100% 15px;background-attachment: local, scroll;

效果如下：

当然，为了实现原始效果，我们需要再加两个渐变用于底部阴影和它的蒙版，但是逻辑基本上是一样的，所以就留给读者做练习吧（可以在下面的示例中查看解决方案）。