tml頁(yè)面設(shè)置動(dòng)態(tài)金額滾動(dòng)效果！

一開(kāi)始加載頁(yè)面，數(shù)字都會(huì)過(guò)渡滾動(dòng)到具體數(shù)字上！

代碼：

html:

css:

js:

出滾動(dòng)講起

Web 開(kāi)發(fā)中，經(jīng)常遇到需要固定容器大小，然后內(nèi)部?jī)?nèi)容超出的情況，相信非技術(shù)的也經(jīng)常會(huì)遇到這樣的場(chǎng)景，沒(méi)錯(cuò)，幾乎打開(kāi)任何一個(gè)門(mén)戶(hù)網(wǎng)站你使用鼠標(biāo)滾輪就屬于上面的情況。

解決方案自然就是 overflow 這個(gè) CSS 屬性。

visible 默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。

hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見(jiàn)的。

scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

auto 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。

效果如下：

上面是 visible。

上面是 hidden。

上面是 scroll 與 auto。

注意，Chrome 系列瀏覽器都會(huì)自動(dòng)隱藏滾動(dòng)條，不論設(shè)置 auto 還是 scroll。

因此我們才有今天的話題。

inherit 就不舉例了，這個(gè)與父元素有關(guān)。

強(qiáng)制顯示滾動(dòng)條

首先，scroll 說(shuō)好的顯示，被瀏覽器給搞掉了。

其次，隱藏是好事畢竟占位置，而且當(dāng)今的網(wǎng)民基本都本能的知道滾動(dòng)操作。

最后，個(gè)人舉四肢贊成自動(dòng)隱藏。

但是?。?！

你總會(huì)遇到不怎么上網(wǎng)的網(wǎng)民，在看不到內(nèi)容時(shí)候不知所措。

亦或者，你遇到的坑爹的老板，就是要讓你顯示（這個(gè)老板可能不怎么上網(wǎng)……）。

或者你們產(chǎn)品設(shè)計(jì)對(duì)象就是一些非網(wǎng)民的使用。

又或者你們?cè)O(shè)計(jì)覺(jué)得有個(gè)自定義滾動(dòng)條好看。

等等等等情況，相信我，你一定會(huì)遇到這個(gè)情況的。

于是我們需要定制一個(gè)滾動(dòng)條，放心，CSS 偽類(lèi)已經(jīng)給你提供好了。

核心代碼由 Steven Lewis：https://codepen.io/stevenlewis/pen/hubpL 提供，本人用到，精簡(jiǎn)下順便搬運(yùn)。

<div class="frame">
 Foo<br />
 Bar<br />
 Baz<br />
 Help I'm trapped in an HTML factory! 
</div>

上面是 HTML 代碼。

frame {
 overflow-y: auto;
 border: 1px solid black;
 height: 3em;
 width: 10em;
 line-height: 1em;
}
.frame::-webkit-scrollbar {
 -webkit-appearance: none;
}
.frame::-webkit-scrollbar:vertical {
 width: 11px;
}
.frame::-webkit-scrollbar-thumb {
 border-radius: 8px;
 border: 2px solid white;
 background-color: rgba(0, 0, 0, .5);
}

這里是對(duì)應(yīng)的 CSS 代碼。

做了對(duì)比動(dòng)圖，大家看一下：

上面是 auto（或 scroll）控制，細(xì)節(jié)是右邊的滾動(dòng)條會(huì)自動(dòng)隱藏。

上面是經(jīng)過(guò)定制的，所以不會(huì)隱藏。

.frame::-webkit-scrollbar {
 -webkit-appearance: none;
}

隱藏默認(rèn)的滾動(dòng)條。

.frame::-webkit-scrollbar:vertical {
 width: 11px;
}

設(shè)置垂直滾動(dòng)條寬度。

當(dāng)然也有水平滾動(dòng)條配置，.frame::-webkit-scrollbar:horizontal，那么就要設(shè)置他的高度的。如下：

.frame::-webkit-scrollbar:horizontal {
 height: 11px;
}

.frame::-webkit-scrollbar-thumb {
 border-radius: 8px;
 border: 2px solid red;
 background-color: rgba(0, 0, 0, .5);
}

滾動(dòng)條的其他樣式定制，注意，這個(gè)一定也要定制，否則就是一個(gè)透明的滾動(dòng)條……

OK，建議沒(méi)有用過(guò)或者忘了的小伙伴保存一下，一定會(huì)再次用到的。