国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

不可思議的純 CSS 滾動(dòng)進(jìn)度條效果

TNFE / 2291人閱讀

摘要：如果頁(yè)面滾動(dòng)和進(jìn)度條是一個(gè)整體呢實(shí)現(xiàn)需求不賣(mài)關(guān)子了，下面我們運(yùn)用線性漸變來(lái)實(shí)現(xiàn)這個(gè)功能。

問(wèn)題先行，如何使用 CSS 實(shí)現(xiàn)下述滾動(dòng)條效果？

就是頂部黃色的滾動(dòng)進(jìn)度條，隨著頁(yè)面的滾動(dòng)進(jìn)度而變化長(zhǎng)短。

在繼續(xù)閱讀下文之前，你可以先緩一緩。嘗試思考一下上面的效果或者動(dòng)手嘗試一下，不借助 JS ，能否巧妙的實(shí)現(xiàn)上述效果。

OK，繼續(xù)。這個(gè)效果是我在業(yè)務(wù)開(kāi)發(fā)的過(guò)程中遇到的一個(gè)類(lèi)似的小問(wèn)題。其實(shí)即便讓我借助 Javascript ，我的第一反應(yīng)也是，感覺(jué)很麻煩啊。所以我一直在想，有沒(méi)有可能只使用 CSS 完成這個(gè)效果呢？

分析需求

第一眼看到這個(gè)效果，感覺(jué)這個(gè)跟隨滾動(dòng)動(dòng)畫(huà)，僅靠 CSS 是不可能完成的，因?yàn)檫@里涉及了頁(yè)面滾動(dòng)距離的計(jì)算。

如果想只用 CSS 實(shí)現(xiàn)，只能另辟蹊徑，使用一些討巧的方法。

好，下面就借助一些奇技淫巧，使用 CSS 一步一步完成這個(gè)效果。分析一下難點(diǎn)：

如何得知用戶(hù)當(dāng)前滾動(dòng)頁(yè)面的距離并且通知頂部進(jìn)度條？

正常分析應(yīng)該是這樣的，但是這就陷入了傳統(tǒng)的思維。進(jìn)度條就只是進(jìn)度條，接收頁(yè)面滾動(dòng)距離，改變寬度。如果頁(yè)面滾動(dòng)和進(jìn)度條是一個(gè)整體呢？

實(shí)現(xiàn)需求

不賣(mài)關(guān)子了，下面我們運(yùn)用線性漸變來(lái)實(shí)現(xiàn)這個(gè)功能。

假設(shè)我們的頁(yè)面被包裹在 中，可以滾動(dòng)的是整個(gè) body，給它添加這樣一個(gè)從左下到到右上角的線性漸變：

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-repeat: no-repeat;
}

那么，我們可以得到一個(gè)這樣的效果：

Wow，黃色塊的顏色變化其實(shí)已經(jīng)很能表達(dá)整體的進(jìn)度了。其實(shí)到這里，聰明的同學(xué)應(yīng)該已經(jīng)知道下面該怎么做了。

我們運(yùn)用一個(gè)偽元素，把多出來(lái)的部分遮住：

body::after {
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}

為了方便演示，我把上面白色底改成了黑色透明底，：

實(shí)際效果達(dá)成了這樣：

眼尖的同學(xué)可能會(huì)發(fā)現(xiàn)，這樣之后，滑到底的時(shí)候，進(jìn)度條并沒(méi)有到底：

究其原因，是因?yàn)?body 的線性漸變高度設(shè)置了整個(gè) body 的大小，我們調(diào)整一下漸變的高度：

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
}

這里使用了 calc 進(jìn)行了運(yùn)算，減去了 100vh，也就是減去一個(gè)屏幕的高度，這樣漸變剛好在滑動(dòng)到底部的時(shí)候與右上角貼合。

而 + 5px 則是滾動(dòng)進(jìn)度條的高度，預(yù)留出 5px 的高度。再看看效果，完美：

至此，這個(gè)需求就完美實(shí)現(xiàn)拉，算是一個(gè)不錯(cuò)的小技巧，完整的 Demo：

CodePen Demo -- 使用線性漸變實(shí)現(xiàn)滾動(dòng)進(jìn)度條

別人寫(xiě)過(guò)的東西通常我都不會(huì)再寫(xiě)，這個(gè)技巧很早以前就有看到，中午在業(yè)務(wù)中剛好用到這個(gè)技巧就寫(xiě)下了本文，沒(méi)有去考證最先發(fā)明這個(gè)技巧的是誰(shuí)。不知道已經(jīng)有過(guò)類(lèi)似的文章，所以各位也可以看看下面這篇：

W3C -- 純CSS實(shí)現(xiàn)Scroll Indicator(滾動(dòng)指示器)

最后

其實(shí)這只是非常牛逼的漸變非常小的一個(gè)技巧。更多你想都想不到的有趣的 CSS 你可以來(lái)這里瞧瞧：

CSS-Inspiration -- CSS靈感

更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS ，持續(xù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。

好了，本文到此結(jié)束，希望對(duì)你有幫助 :)

如果還有什么疑問(wèn)或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬(wàn)望告知。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/117220.html

相關(guān)文章

  • 不可思議的純 CSS 滾動(dòng)進(jìn)度條效果

    摘要：如果頁(yè)面滾動(dòng)和進(jìn)度條是一個(gè)整體呢實(shí)現(xiàn)需求不賣(mài)關(guān)子了，下面我們運(yùn)用線性漸變來(lái)實(shí)現(xiàn)這個(gè)功能。而則是滾動(dòng)進(jìn)度條的高度，預(yù)留出的高度。結(jié)論先行，如何使用 CSS 實(shí)現(xiàn)下述滾動(dòng)條效果？ 就是頂部黃色的滾動(dòng)進(jìn)度條，隨著頁(yè)面的滾動(dòng)進(jìn)度而變化長(zhǎng)短。 在繼續(xù)閱讀下文之前，你可以先緩一緩。嘗試思考一下上面的效果或者動(dòng)手嘗試一下，不借助 JS ，能否巧妙的實(shí)現(xiàn)上述效果。 OK，繼續(xù)。這個(gè)效果是我在業(yè)務(wù)開(kāi)發(fā)的過(guò)程...

    roadtogeek 評(píng)論0 收藏0

  • GitHub 值得收藏的前端項(xiàng)目[每月更新...]

    摘要：也是一款優(yōu)秀的響應(yīng)式框架站點(diǎn)所使用的一套框架為微信服務(wù)量身設(shè)計(jì)的一套框架一組很小的，響應(yīng)式的組件，你可以在網(wǎng)頁(yè)的項(xiàng)目上到處使用一個(gè)可定制的文件，使瀏覽器呈現(xiàn)的所有元素，更一致和符合現(xiàn)代標(biāo)準(zhǔn)。 GitHub 值得收藏的前端項(xiàng)目 整理與收集的一些比較優(yōu)秀github項(xiàng)目，方便自己閱讀，順便分享出來(lái)，大家一起學(xué)習(xí)，本篇文章會(huì)持續(xù)更新，版權(quán)歸原作者所有。歡迎github star與fork 預(yù)...

    maxmin 評(píng)論0 收藏0

  • FE.CSS-Sultana后記：純css也能寫(xiě)col,select,datepicker,caro

    摘要：接著只要在中使用就能搞定自適應(yīng)。代碼如下標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題在上述點(diǎn)功能中，可以用變量解決，比如實(shí)現(xiàn)了寬度，高度圓點(diǎn)大小直徑的控件。 未完待續(xù) 背景 如今css3越來(lái)越發(fā)達(dá)，focus-within等屬性也已經(jīng)開(kāi)始在Chrome得到支持。如果有出色的css功底，一點(diǎn)點(diǎn)ps技能，你也能用css3配合原生html標(biāo)簽寫(xiě)出優(yōu)秀的框架。通過(guò)對(duì)css3的實(shí)踐，我發(fā)現(xiàn)自定義原生控件并不是什么難事，...

    BigTomato 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<