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

資訊專欄INFORMATION COLUMN

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

roadtogeek / 3254人閱讀

摘要：如果頁面滾動和進(jìn)度條是一個整體呢實(shí)現(xiàn)需求不賣關(guān)子了，下面我們運(yùn)用線性漸變來實(shí)現(xiàn)這個功能。而則是滾動進(jìn)度條的高度，預(yù)留出的高度。

結(jié)論先行，如何使用 CSS 實(shí)現(xiàn)下述滾動條效果？

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

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

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

?

分析需求

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

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

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

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

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

??

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

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

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

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

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

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

我們運(yùn)用一個偽元素，把多出來的部分遮?。?/span>

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

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

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

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

究其原因，是因?yàn)?body?的線性漸變高度設(shè)置了整個 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，也就是減去一個屏幕的高度，這樣漸變剛好在滑動到底部的時候與右上角貼合。

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

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

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

?

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

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

??

最后

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

CSS-Inspiration -- CSS靈感

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

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

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

?

?

?

?

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1355.html

相關(guān)文章

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

    摘要：如果頁面滾動和進(jìn)度條是一個整體呢實(shí)現(xiàn)需求不賣關(guān)子了，下面我們運(yùn)用線性漸變來實(shí)現(xiàn)這個功能。 問題先行，如何使用 CSS 實(shí)現(xiàn)下述滾動條效果？ showImg(https://segmentfault.com/img/remote/1460000017830430?w=607&h=250); 就是頂部黃色的滾動進(jìn)度條，隨著頁面的滾動進(jìn)度而變化長短。 在繼續(xù)閱讀下文之前，你可以先緩一緩。嘗試...

    TNFE 評論0 收藏0

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

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

    maxmin 評論0 收藏0

  • FE.CSS-Sultana后記：純css也能寫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越來越發(fā)達(dá)，focus-within等屬性也已經(jīng)開始在Chrome得到支持。如果有出色的css功底，一點(diǎn)點(diǎn)ps技能，你也能用css3配合原生html標(biāo)簽寫出優(yōu)秀的框架。通過對css3的實(shí)踐，我發(fā)現(xiàn)自定義原生控件并不是什么難事，...

    BigTomato 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<