在PC端，无论哪款浏览器提供的默认滚动条，样式都是很丑，无法满足现在页面设计的要求，为此衍生出了无数的模拟滚动条的插件，这些插件可以使用CSS来美化滚动条
在PC端，无论哪款浏览器提供的默认滚动条，样式都是很丑，无法满足现在页面设计的要求，为此衍生出了无数的模拟滚动条的插件，这些插件可以使用CSS来美化滚动条。当然，在实际的项目中，还有其他常见的场景。
1. 无滚动条但依然可以滚动
实际内容超过了容器的高度，只能使用滚轮进行滚动。这种情形下，默认只能进行垂直滚动，不能进行上下滚动。当然，如果要实现滚轮进行横向滚动，这就需要借助js添加滚轮事件。这一小节里，我们只讨论垂直滚动的情况。
其实实现无滚动条但依然可以滚动，不用任何的js就能实现：比如.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>
这种方式没有兼容性问题，在任何浏览器都可以，技术上实现起来也很简单；唯一的缺点就是用户对滚动不太敏感，可能不知道需要滚动才能查看下面的内容。
- 美化后的滚动条
这种情形下，需要的是浏览器自带的滚动条，依然不需要借助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;
}
/* 滑轨两头的监听按钮 */
.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来模拟一个滚动条，然后根据位移，滚动条和内容移动相应的距离。
这里需要先定义几个简单的变量：
-
wrap_height : 外层容器的高度
-
content_height : 内容的实际高度，通常大于外层容器的高度
-
content_dis : 内容当前的位置
-
bar_height : 滚动条的长度
-
bar_dis : 滚动条当前的位置
滚动条与其滚动区域的比例和外层容器与实际内容的比例是相等的，这样就能计算出滚动条的长度，即：
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)，根据两个pageY，计算出鼠标的偏移量(pageY2-pageY1)，即滚动条的偏移量bar_diff。bar_diff加上滚动条初始时的top值，就是滚动条现在的top值。根据上面的公式也能计算出内容的偏移量。
$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));
}
如果容器的高度可能随着窗口变化，或者其他原因导致容器的高度发生变化，都需要重新计算滚动条的长度和能够滚动的区域。
张鑫旭大神在他自己的博客里曾经总结过关于滚轮的事件，这里拿来一下，相关链接请下拉到最后：
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);
网友评论