在PC端，無論哪款瀏覽器提供的默認滾動條许赃，樣式都是很丑，無法滿足現(xiàn)在頁面設計的要求沟于，為此衍生出了無數(shù)的模擬滾動條的插件咳胃，這些插件可以使用CSS來美化滾動條
在PC端，無論哪款瀏覽器提供的默認滾動條旷太，樣式都是很丑展懈，無法滿足現(xiàn)在頁面設計的要求，為此衍生出了無數(shù)的模擬滾動條的插件供璧，這些插件可以使用CSS來美化滾動條存崖。當然，在實際的項目中睡毒，還有其他常見的場景来惧。
1. 無滾動條但依然可以滾動
實際內容超過了容器的高度，只能使用滾輪進行滾動吕嘀。這種情形下违寞，默認只能進行垂直滾動，不能進行上下滾動偶房。當然趁曼，如果要實現(xiàn)滾輪進行橫向滾動，這就需要借助js添加滾輪事件棕洋。這一小節(jié)里挡闰，我們只討論垂直滾動的情況。
其實實現(xiàn)無滾動條但依然可以滾動掰盘，不用任何的js就能實現(xiàn)：比如.content是一個有滾動條的容器摄悯，他的高度和寬度分別是width:400px; height:300px;，我們可以在.content外面再添加一個div(.wrap)愧捕，讓這個div的寬度正好遮住 .content 的滾動條：
<style type="text/css">
.wrap{
width: 400px;
height: 300px;
overflow: hidden; /* 遮住滾動條 */
border: 1px solid #aaa;
}
.content{
width: 417px; /* 一般滾動條的寬度差不多是17px */
height: 300px;
overflow: auto;
}
</style>
<div class="wrap">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend.</p>
<p>In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. </p>
<p>Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis.</p>
<p> Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.</p>
</div>
</div>
這種方式?jīng)]有兼容性問題奢驯，在任何瀏覽器都可以，技術上實現(xiàn)起來也很簡單次绘；唯一的缺點就是用戶對滾動不太敏感瘪阁，可能不知道需要滾動才能查看下面的內容。
- 美化后的滾動條
這種情形下邮偎，需要的是瀏覽器自帶的滾動條管跺，依然不需要借助js，只不過需要對滾動條進行美化禾进；但是滾動條的美化是有瀏覽器兼容性的豁跑，只有webkit內核的瀏覽器（chrome, opera, safari等）才支持，firefox到目前位置還不支持滾動條美化泻云，IE瀏覽器只支持修改滾動條的顏色艇拍，其他的則無法修改。
我們先來看看webkit下滾動條的美化宠纯，webkit下是使用的偽元素：
/* 設置垂直滾動條的寬度和水平滾動條的高度 */
.demo::-webkit-scrollbar{
width: 8px;
height: 8px;
}
/* 設置滾動條的滑軌 */
.demo::-webkit-scrollbar-track {
background-color: #ddd;
}
/* 滑塊 */
.demo::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.6);
border-radius: 4px;
}
/* 滑軌兩頭的監(jiān)聽按鈕 */
.demo::-webkit-scrollbar-button {
background-color: #888;
display: none;
}
/* 橫向滾動條和縱向滾動條相交處尖角 */
.demo::-webkit-scrollbar-corner {
/*background-color: black;*/
}
看了上面美化滾動條的屬性淑倾，如果不考慮兼容性的問題，我們還可以使用-webkit-scrollbar來隱藏滾動條征椒，不用再在外面套一個div了娇哆，而且依然可以滾動。
IE瀏覽器下滾動條下勃救，使用樣式進行美化碍讨，而且只能修改顏色：
scrollbar-arrow-color: color; /三角箭頭的顏色/
scrollbar-face-color: color; /立體滾動條的顏色（包括箭頭部分的背景色）/
scrollbar-3dlight-color: color; /立體滾動條亮邊的顏色/
scrollbar-highlight-color: color; /滾動條的高亮顏色（左陰影？）/
scrollbar-shadow-color: color; /立體滾動條陰影的顏色/
scrollbar-darkshadow-color: color; /立體滾動條外陰影的顏色/
scrollbar-track-color: color; /立體滾動條背景顏色/
scrollbar-base-color:color; /滾動條的基色/
當前樣式只在IE下有效果：
3. 自定義滾動條
自定義滾動條借助js里的滾輪事件蒙秒，mousemove事件等勃黍，使用div來模擬一個滾動條，然后根據(jù)位移晕讲，滾動條和內容移動相應的距離覆获。
這里需要先定義幾個簡單的變量：
wrap_height : 外層容器的高度
content_height : 內容的實際高度马澈，通常大于外層容器的高度
content_dis : 內容當前的位置
bar_height : 滾動條的長度
bar_dis : 滾動條當前的位置
滾動條與其滾動區(qū)域的比例和外層容器與實際內容的比例是相等的，這樣就能計算出滾動條的長度弄息，即：
bar_height/wrap_height = wrap_height/content_height;
bar_height = wrap_height*wrap_height/content_height; // 滾動條的長度
同理痊班，滾動條滾動的距離與內容滾動的距離也是成比例的，因為我們實際操作的是滾動條摹量，通過這個我們能知道滾動條滾動的距離后涤伐，得出內容滾動的距離：
bar_dis/(wrap_height-bar_height) = content_dis/(content_height-wrap_height);
content_dis = (content_height-wrap_height)*bar_dis/(wrap_height-bar_height);
滾動條和內容的滾動，實際上是修改這兩者的top值缨称。接下來就是為滾動條添加mousedown, mousemove, mouseup事件凝果，通過這些事件修改滾動條的top值。在鼠標按下(mousedown)時睦尽，獲取鼠標當前的pageY1(IE不支持pageX器净、pageY屬性，但支持offsetX当凡、offsetY)和滾動條的top值掌动，然后在鼠標移動(mousemove)時，再獲取鼠標的pageY2(offsetY)宁玫，根據(jù)兩個pageY粗恢，計算出鼠標的偏移量(pageY2-pageY1)，即滾動條的偏移量bar_diff欧瘪。bar_diff加上滾動條初始時的top值眷射，就是滾動條現(xiàn)在的top值。根據(jù)上面的公式也能計算出內容的偏移量佛掖。
$scroll_bar.css('height', scroll_bar_height)
.on('mousedown', function(event){
var $this = $(this),
startX = event.pageY,
top = $this.position().top;
$(document).on('mousemove', function(e){
var diff = e.pageY - startX;
changePos( top+diff );
}).on('mouseup', function(event){
$(this).off('mousemove mouseup');
this.releaseCapture && this.releaseCapture();
});
this.setCapture && this.setCapture();
});
// 設置滾動條和內容的top值
// end表示滾動條當前滾動到的位置
function changePos(end){
if(end < 0){
end = 0;
}else if(end > obj_height - scroll_bar_height){
end = obj_height - scroll_bar_height;
}
$scroll_bar.css('top', end);
$scroll_con.css('top', -(scroll_con_height - obj_height)*end/(obj_height - scroll_bar_height));
}
如果容器的高度可能隨著窗口變化妖碉，或者其他原因導致容器的高度發(fā)生變化，都需要重新計算滾動條的長度和能夠滾動的區(qū)域芥被。
張鑫旭大神在他自己的博客里曾經(jīng)總結過關于滾輪的事件欧宜，這里拿來一下，相關鏈接請下拉到最后：
var addEvent = (function(window, undefined) {
var _eventCompat = function(event) {
var type = event.type;
if (type == 'DOMMouseScroll' || type == 'mousewheel') {
event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
}
//alert(event.delta);
if (event.srcElement && !event.target) {
event.target = event.srcElement;
}
if (!event.preventDefault && event.returnValue !== undefined) {
event.preventDefault = function() {
event.returnValue = false;
};
}
/*
......其他一些兼容性處理 */
return event;
};
if (window.addEventListener) {
return function(el, type, fn, capture) {
if (type === "mousewheel" && document.mozHidden !== undefined) {
type = "DOMMouseScroll";
}
el.addEventListener(type, function(event) {
fn.call(this, _eventCompat(event));
}, capture || false);
}
} else if (window.attachEvent) {
return function(el, type, fn, capture) {
el.attachEvent("on" + type, function(event) {
event = event || window.event;
fn.call(el, _eventCompat(event));
});
}
}
return function() {};
})(window);
