出滾動講起

Web 開發中，經常遇到需要固定容器大小，然后內部內容超出的情況，相信非技術的也經常會遇到這樣的場景，沒錯，幾乎打開任何一個門戶網站你使用鼠標滾輪就屬于上面的情況。

解決方案自然就是 overflow 這個 CSS 屬性。

visible 默認值。內容不會被修剪，會呈現在元素框之外。

hidden 內容會被修剪，并且其余內容是不可見的。

scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。

auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。

inherit 規定應該從父元素繼承 overflow 屬性的值。

效果如下：

上面是 visible。

上面是 hidden。

上面是 scroll 與 auto。

注意，Chrome 系列瀏覽器都會自動隱藏滾動條，不論設置 auto 還是 scroll。

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

inherit 就不舉例了，這個與父元素有關。

強制顯示滾動條

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

其次，隱藏是好事畢竟占位置，而且當今的網民基本都本能的知道滾動操作。

最后，個人舉四肢贊成自動隱藏。

但是！！！

你總會遇到不怎么上網的網民，在看不到內容時候不知所措。

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

或者你們產品設計對象就是一些非網民的使用。

又或者你們設計覺得有個自定義滾動條好看。

等等等等情況，相信我，你一定會遇到這個情況的。

于是我們需要定制一個滾動條，放心，CSS 偽類已經給你提供好了。

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

<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);
}

這里是對應的 CSS 代碼。

做了對比動圖，大家看一下：

上面是 auto（或 scroll）控制，細節是右邊的滾動條會自動隱藏。

上面是經過定制的，所以不會隱藏。

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

隱藏默認的滾動條。

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

設置垂直滾動條寬度。

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

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

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

滾動條的其他樣式定制，注意，這個一定也要定制，否則就是一個透明的滾動條……

OK，建議沒有用過或者忘了的小伙伴保存一下，一定會再次用到的。

avascript中制作滾動代碼的常用屬性

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

2.假設 obj 為某個 HTML 控件。

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

我們對前面提到的“上方或上層”與“左方或上層”控件作個說明。 例如：

“提交”按鈕的 offsetTop 指“提交”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。 “重置”按鈕的 offsetTop 指“重置”按鈕距“tool”層上邊框的距離，因為距其上邊最近的是 “tool” 層的上邊框。 “提交”按鈕的 offsetLeft 指“提交”按鈕距“tool”層左邊框的距離，因為距其左邊最近的是 “tool” 層的左邊框。 “重置”按鈕的 offsetLeft 指“重置”按鈕距“提交”按鈕右邊框的距離，因為距其左邊最近的是“提交”按鈕的右邊框。

以上屬性在 FireFox 中也有效。

3.offsetTop 與 style.top 的區別

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

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

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

4.scrollLeft : 對象的最左邊到對象在當前窗口顯示的范圍內的左邊的距離． 即是在出現了橫向滾動條的情況下，滾動條拉動的距離． scrollTop 對象的最頂部到對象在當前窗口顯示的范圍內的頂邊的距離． 即是在出現了縱向滾動條的情況下，滾動條拉動的距離．