搜尋
首頁web前端html教學CSS秘密花园: 滚动提示_html/css_WEB-ITnose

《 CSS Secrets 》是 @Lea Verou 最新著作,这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书,经过一段时间的阅读,我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。

滚动条主要是用来告诉用户当前显示的并不是所有的内容,滚动的话可以查看更多。但是,它们往往显示得很笨拙而且分散了用户的注意力,所以现代操作系统中已经开始对它们进行简化,通常是把它们完全隐藏起来,等到用户和可滚动的元素元素有实际交互的时候再出现。

虽然现在滚动条很少用来控制滚动了(用户趋向于用手势来滑动屏幕),提醒用户,元素中还有更多的内容没有全部展示出来,通过一种微妙的方式来传达信息是很有用的,即使是对那些当前并没有和用户进行交互的元素。

这个盒子的内容实际上比当前显示的更多,它是可滚动的。但是如果你没有和它进行交互的话,你根本不会发现。

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 并没有很好地解决我们的情况。如果我们把它应用在我们的阴影渐变上,它给我们完全相反的结果:当我们一路滚动到顶部的时候我们得到了一个阴影,但是当我们向下滚动的时候,阴影消失了。这是只是一个开始,不过——我们要转换方向了。

    新的技巧是使用两个背景:一个用于生成阴影,一个基本上是白色矩形,用来覆盖阴影,充当蒙版的角色。阴影背景有默认的 background-attachment ( scroll ),因为我们希望它一直停留在原地。然后,蒙版背景的 background-attachment 为 local ,这样当我们滚动到顶部的时候它会覆盖阴影,然后当我们向下滚动的时候,它会随内容滚动,从而显示阴影。

    我将使用线性渐变来创建蒙版矩形,和元素的背景保持同样的颜色(在我们的示例中,颜色是 white ):

    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;

    你可以在下图中看到它在滚动的不同阶段的效果。

    你可能注意到它似乎是产生了我们预期的效果,但是有一个很明显的缺点:当我们只是轻轻滚动的时候,阴影显示的方式非常地不连贯和别扭。有什么办法可以让它平滑一些吗?

    • 左图:滚动到顶部
    • 中间的图:轻轻地向下滚动
    • 右图:快速向下滚动

    我们可以利用我们的“蒙版”背景其实是一个线性渐变这个事实,把它转换成一个 white 到白色透明的 white ( 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;

    效果如下:

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

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存,這玩意兒,說簡單也簡單,說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章,結果用戶打開還是老版本,這滋味,誰受得了?這篇文章,咱就來扒一扒這背後的彎彎繞繞,以及如何優雅地解決這個問題。讀完之後,你就能輕鬆應對各種緩存難題,讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存,說白了就是瀏覽器或者服務器為了提高訪問速度,把一些靜態資源(比如圖片、CSS、JS)或者頁面內容存儲起來。下次訪問時,直接從緩存裡取,不用再重新下載,速度自然快。但這玩意兒,也是個雙刃劍。新版本上線,

如何使用HTML5表單驗證屬性來驗證用戶輸入?如何使用HTML5表單驗證屬性來驗證用戶輸入?Mar 17, 2025 pm 12:27 PM

本文討論了使用HTML5表單驗證屬性,例如必需的,圖案,最小,最大和長度限制,以直接在瀏覽器中驗證用戶輸入。

HTML5中跨瀏覽器兼容性的最佳實踐是什麼?HTML5中跨瀏覽器兼容性的最佳實踐是什麼?Mar 17, 2025 pm 12:20 PM

文章討論了確保HTML5跨瀏覽器兼容性的最佳實踐,重點是特徵檢測,進行性增強和測試方法。

如何高效地在網頁中為PNG圖片添加描邊效果?如何高效地在網頁中為PNG圖片添加描邊效果?Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS為網頁中添加有效的PNG邊框。 它認為,與JavaScript或庫相比,CSS提供了出色的性能,詳細介紹瞭如何調整邊界寬度,樣式和顏色以獲得微妙或突出的效果

&lt; datalist&gt;的目的是什麼。 元素?&lt; datalist&gt;的目的是什麼。 元素?Mar 21, 2025 pm 12:33 PM

本文討論了html&lt; datalist&gt;元素,通過提供自動完整建議,改善用戶體驗並減少錯誤來增強表格。Character計數:159

&gt; gt;的目的是什麼 元素?&gt; gt;的目的是什麼 元素?Mar 21, 2025 pm 12:34 PM

本文討論了HTML&lt; Progress&gt;元素,其目的,樣式和與&lt; meter&gt;元素。主要重點是使用&lt; progress&gt;為了完成任務和LT;儀表&gt;對於stati

我如何使用html5&lt; time&gt; 元素以語義表示日期和時間?我如何使用html5&lt; time&gt; 元素以語義表示日期和時間?Mar 12, 2025 pm 04:05 PM

本文解釋了HTML5&lt; time&gt;語義日期/時間表示的元素。 它強調了DateTime屬性對機器可讀性(ISO 8601格式)的重要性,並在人類可讀文本旁邊,增強Accessibilit

&lt; meter&gt;的目的是什麼。 元素?&lt; meter&gt;的目的是什麼。 元素?Mar 21, 2025 pm 12:35 PM

本文討論了HTML&lt; meter&gt;元素,用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了&lt; meter&gt;從&lt; progress&gt;和前

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具