CSS 自定義滾動(dòng)條和強(qiáng)制顯示

出滾動(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

上面是 visible。

hidden

上面是 hidden。

scroll 與 auto

上面是 scroll 與 auto。

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

因此我們才有今天的話(huà)題。

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

上面是 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ì)再次用到的。

avascript中制作滾動(dòng)代碼的常用屬性

1.網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.clientWidth; 網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.clientHeight; 網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.offsetWidth (包括邊線(xiàn)的寬); 網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.offsetHeight (包括邊線(xiàn)的寬); 網(wǎng)頁(yè)正文全文寬： document.body.scrollWidth; 網(wǎng)頁(yè)正文全文高： document.body.scrollHeight; 網(wǎng)頁(yè)被卷去的高： document.body.scrollTop; 網(wǎng)頁(yè)被卷去的左： document.body.scrollLeft; 網(wǎng)頁(yè)正文部分上： window.screenTop; 網(wǎng)頁(yè)正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的寬： window.screen.width; 屏幕可用工作區(qū)高度： window.screen.availHeight;

2.假設(shè) obj 為某個(gè) HTML 控件。

obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。 obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。 obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。 obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。

我們對(duì)前面提到的“上方或上層”與“左方或上層”控件作個(gè)說(shuō)明。例如：

“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的距離，因?yàn)榫嗥渖线呑罱氖?“tool” 層的上邊框。 “重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的距離，因?yàn)榫嗥渖线呑罱氖?“tool” 層的上邊框。 “提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的距離，因?yàn)榫嗥渥筮呑罱氖?“tool” 層的左邊框。 “重置”按鈕的 offsetLeft 指“重置”按鈕距“提交”按鈕右邊框的距離，因?yàn)榫嗥渥筮呑罱氖恰疤峤弧卑粹o的右邊框。

以上屬性在 FireFox 中也有效。

3.offsetTop 與 style.top 的區(qū)別

預(yù)備知識(shí)：offsetTop、offsetLeft、offsetWidth、offsetHeight 我們知道 offsetTop 可以獲得 HTML 元素距離上方或外層元素的位置，style.top 也是可以的，二者的區(qū)別是：

(1)offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串，除了數(shù)字外還帶有單位：px。 (2)offsetTop 只讀，而 style.top 可讀寫(xiě)。 (3)如果沒(méi)有給 HTML 元素指定過(guò) top 樣式，則 style.top 返回的是空字符串。

offsetLeft 與 style.left、offsetWidth 與 style.width、offsetHeight 與 style.height 也是同樣道理。 offsetWidth與style.width屬性的區(qū)別在于：如對(duì)象的寬度設(shè)定值為百分比寬度,則無(wú)論頁(yè)面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁(yè)面中對(duì)象的寬度值而不是百分比值

4.scrollLeft : 對(duì)象的最左邊到對(duì)象在當(dāng)前窗口顯示的范圍內(nèi)的左邊的距離．即是在出現(xiàn)了橫向滾動(dòng)條的情況下，滾動(dòng)條拉動(dòng)的距離． scrollTop 對(duì)象的最頂部到對(duì)象在當(dāng)前窗口顯示的范圍內(nèi)的頂邊的距離．即是在出現(xiàn)了縱向滾動(dòng)條的情況下，滾動(dòng)條拉動(dòng)的距離．

今天要給大家分享10款精美的HTML5圖片輪播/切換動(dòng)畫(huà)，這些動(dòng)畫(huà)每一個(gè)都有自己的特點(diǎn)，不管你是PC端的網(wǎng)頁(yè)，還是移動(dòng)端的H5應(yīng)用，都可以嘗試使用這些動(dòng)畫(huà)來(lái)提高應(yīng)用的用戶(hù)體驗(yàn)。

?
PS：請(qǐng)你耐心看完，文末我提供了所有動(dòng)畫(huà)的源碼打包下載鏈接，如果你喜歡這些動(dòng)畫(huà)，可以按需下載，希望對(duì)你有所幫助。

1. 可無(wú)限水平滑動(dòng)的JS畫(huà)廊動(dòng)畫(huà)

這是一個(gè)簡(jiǎn)約而實(shí)用的JS畫(huà)廊相冊(cè)組件，它的特點(diǎn)是可以添加無(wú)限多張相片，并且支持水平無(wú)限循環(huán)滑動(dòng)。另外它還支持對(duì)畫(huà)廊中的相片進(jìn)行展開(kāi)和折疊，并同時(shí)動(dòng)態(tài)展示相片的標(biāo)題和描述。這款相冊(cè)組件主要采用了jQuery插件以及CSS3的過(guò)渡動(dòng)畫(huà)特性，使用起來(lái)十分方便。

2. 基于TweenMax.js的圖片碎裂切換動(dòng)畫(huà)

這是一個(gè)基于TweenMax動(dòng)畫(huà)庫(kù)的圖片碎裂切換動(dòng)畫(huà)，它的特點(diǎn)是點(diǎn)擊圖片時(shí)，圖片就會(huì)像玻璃那樣碎裂成許多塊，然后漸漸地消失，直到下一張圖片顯示為止。這款圖片碎裂動(dòng)畫(huà)也可以應(yīng)用在焦點(diǎn)圖的切換動(dòng)畫(huà)中，效果非常不錯(cuò)。

3. 基于Swiper.js的視差效果圖片滑塊動(dòng)畫(huà)

Swiper.js是一個(gè)流行的移動(dòng)端輪播圖插件，它提供了豐富的功能和配置項(xiàng)。這款圖片滑塊動(dòng)畫(huà)就是基于Swiper.js實(shí)現(xiàn)的，它的特點(diǎn)是圖片切換的時(shí)候，圖片上方將會(huì)出現(xiàn)白色背景的視差效果圖層，并且它可以適配不同的瀏覽器尺寸。

4. 基于Three.js的圖片撕碎切換動(dòng)畫(huà)

這又是一個(gè)非常酷的HTML5 Canvas圖片切換動(dòng)畫(huà)，它是基于知名3D動(dòng)畫(huà)庫(kù)threejs實(shí)現(xiàn)的。在圖片切換過(guò)程中，你也可以通過(guò)鼠標(biāo)拖動(dòng)來(lái)查看切換時(shí)的具體細(xì)節(jié)效果。如果將它制作成一個(gè)效果非常獨(dú)特而華麗的相冊(cè)或者焦點(diǎn)圖插件，相信會(huì)很不錯(cuò)的。

5. CSS濾鏡特效下的手風(fēng)琴圖片切換動(dòng)畫(huà)

這是一個(gè)純CSS實(shí)現(xiàn)的手風(fēng)琴特效的圖片切換動(dòng)畫(huà)，它的特點(diǎn)是采用了CSS濾鏡特效，首先將原圖通過(guò)濾鏡變換成黑白樣式，鼠標(biāo)滑過(guò)激活圖片后，再將黑白圖轉(zhuǎn)換成原圖，從而實(shí)現(xiàn)圖片高亮的效果。

6. jQuery手風(fēng)琴圖片播放器可自動(dòng)播放

這同樣是一款手風(fēng)琴特效的圖片切換動(dòng)畫(huà)，它基于jQuery開(kāi)發(fā)，是一款非常不錯(cuò)的jQuery圖片輪播插件。它的特點(diǎn)是支持自動(dòng)播放，使用簡(jiǎn)單，對(duì)于一些商品展示的站點(diǎn)或者app，比較適合使用。

7. HTML5 SVG實(shí)現(xiàn)的波浪切換圖片動(dòng)畫(huà)

這是一款采用SVG遮罩來(lái)實(shí)現(xiàn)波浪樣式的圖片切換動(dòng)畫(huà)。所有的圖片采用背景圖片的方式，圖片上方定義SVG圓形路徑，通過(guò)對(duì)圓形svg路徑的樣式渲染，實(shí)現(xiàn)波浪切換的動(dòng)畫(huà)效果。

8. 基于jQuery的3D圖片切換插件Slicebox

Slicebox是一款基于jQuery的圖片切換插件，盡管jQuery在新的web系統(tǒng)中使用越來(lái)越少，但我們依然可以使用它的強(qiáng)大插件來(lái)豐富我們現(xiàn)有的網(wǎng)站。這款圖片切換插件的特點(diǎn)是播放上一張或下一張圖片時(shí)，圖片會(huì)出現(xiàn)水平分裂或垂直分裂的3D視覺(jué)效果。

9. jQuery響應(yīng)式圖片切換插件，可自動(dòng)播放

這款jQuery圖片切換插件擁有簡(jiǎn)單的使用方法和靈活的擴(kuò)展方式，支持單頁(yè)面多實(shí)例，并且可適配不同的屏幕尺寸。另外通過(guò)配置，我們可以讓圖片切換組件支持自動(dòng)播放、顯示切換按鈕、鼠標(biāo)滑過(guò)放大圖片等特性。

10. 純CSS實(shí)現(xiàn)的水平3D圖片滾動(dòng)特效

這是一款純CSS實(shí)現(xiàn)的圖片滾動(dòng)特效，它的特點(diǎn)是我們可以通過(guò)滾動(dòng)瀏覽器的橫向滾動(dòng)條，可以讓圖片進(jìn)行水平切換滾動(dòng)。另外圖片排列呈現(xiàn)3D投影的視覺(jué)效果，同時(shí)也可以在移動(dòng)端通過(guò)手指滑動(dòng)來(lái)實(shí)現(xiàn)圖片的橫向滾動(dòng)瀏覽。

在線(xiàn)咨詢(xún)

上一篇：大數(shù)據(jù)挖掘—（十）：爬取校花照片，并保存到本地
下一篇：Axure原型學(xué)習(xí)：微信讀書(shū)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商