自定义滚动条支持滚轮——主流浏览器全兼容

最新推荐文章于 2021-10-16 15:26:51 发布

pvfhv

最新推荐文章于 2021-10-16 15:26:51 发布

阅读量5k

点赞数

分类专栏： javascript 文章标签：自定义滚动条滚轮

本文链接：https://blog.csdn.net/pvfhv/article/details/6174059

版权

javascript 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

在开发项目中，经常会用到自定义的滚动条效果，结合鼠标的滚轮事件做到非常绚的效果，具体代码如下，供大家参考：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自定义滚动条</title>
		<style type="text/css">
			#container {
				width: 300px;
				height: 400px;
				border: solid 1px grey;
				margin: 0 auto;
				position: relative;
				overflow: hidden;
			}
			#div1 {
				width: 280px;
				position: absolute;
				left: 0;
			}
			#div2 {
				width: 20px;
				height: 400px;
				background-color: #999;
				position: absolute;
				right: 0;
			}
			#div3 {
				width: 20px;
				height: 20px;
				background-color: red;
				position: absolute;
				left: 0;
				top: 0;
				cursor: pointer;
			}

		</style>
	</head>
	<body>
		<div id="container">
			<div id="div1">
				相信很多人都遇到过在设计中自定义滚动条样式的情景，之前我都是努力说服设计师接受浏览器自带的滚动条样式，但是这样只能规避还是解决不了问题，最近在项目中遇到了，正好来总结一下。当然，兼容所有浏览器的滚动条样式目前是不存在的。

				IE下的滚动条样式

				IE是最早提供滚动条的样式支持，好多年了，但是其它浏览器一直没有支持，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; /*滚动条的基色*/

				大概就这些，你也可以定义cursor来定义滚动条的鼠标手势。

				这里，很久以前danger做了个基于Flash的可视化工具，简单但是好用选中CSS选项即可自动生成CSS样式，这里不再过多的介绍了。嗯，多谢大猫老湿推荐。

				webkit的自定义滚动条样式

				yes，这里才是今天要重点介绍的。

				从上一部分的样式名中就可以看到，IE只能定义相关部分的color等属性，这样太不灵活了。

				webkit最近实现了对滚动条的支持，先看一个简单的demo：
			</div>
			<div id="div2">
				<div id="div3"></div>
			</div>
		</div>

		<script type="text/javascript" charset="utf-8">
			var oContainer = document.getElementById("container"), oDiv1 = document.getElementById("div1"), oDiv2 = document.getElementById("div2"), oDiv3 = document.getElementById("div3");

			oDiv3.onmousedown = function(e) {
				e = e || event;

				var disY = e.clientY - this.offsetTop;
				
				if(oDiv3.setCapture){
					oDiv3.οnmοusemοve=fnMove;
					oDiv3.οnmοuseup=fnUp;
					oDiv3.setCapture();
				}else{
					document.οnmοusemοve=fnMove;
					document.οnmοuseup=fnUp;
				}
				
				function fnMove(ev) {
					ev = ev || event;

					var t = ev.clientY - disY;
					setTop(t);
				};

				function fnUp() {
					this.onmousemove = null;
					this.onmouseup = null;
					
					if(this.releaseCapture){
						this.releaseCapture();
					}
				};

				return false;
			};

			function setTop(t) {
				var down = oDiv2.offsetHeight - oDiv3.offsetHeight;

				if (t < 0) {
					t = 0;
				} else if (t > down) {
					t = down
				}

				oDiv3.style.top = t + 'px';

				var scale = t / down;
				oDiv1.style.top = -(oDiv1.offsetHeight - oContainer.offsetHeight) * scale + 'px';
			}

			addEvent(oDiv1, 'mousewheel', mousewheel);
			addEvent(oDiv1, 'DOMMouseScroll', mousewheel);
			addEvent(oDiv2, 'mousewheel', mousewheel);
			addEvent(oDiv2, 'DOMMouseScroll', mousewheel);

			function addEvent(obj, oEvent, fn) {
				if (obj.attachEvent) {
					obj.attachEvent('on' + oEvent, fn);
				} else {
					obj.addEventListener(oEvent, fn, false);
				}
			}

			function mousewheel(e) {
				var ev = e || event, bDown = false;

				bDown = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;
				
				if (bDown) {
					setTop(oDiv3.offsetTop+10);
				}else{
					setTop(oDiv3.offsetTop-10);
				}

				//FF,绑定事件，阻止默认事件
				if (e.preventDefault) {
					e.preventDefault();
				}

				return false;
			}
		</script>
	</body>
</html>