DIV模拟的自定义滚动条

最新推荐文章于 2024-07-29 09:26:52 发布

weistar103

最新推荐文章于 2024-07-29 09:26:52 发布

阅读量501

点赞数

分类专栏： JAVASCRIPT 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/weistar103/article/details/84494756

版权

JAVASCRIPT 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

除了上下两个箭头以外，滚动条和一般的浏览器基本差不多
html结构很简单，mainBox是外层div，content是内容，滚动条div是js动态生成的.
<div id="mainBox">
<div id="content"></div>
</div>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div模拟的自定义滚动条</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

p {
	height: 1000px;
}

#mainBox {
	width: 400px;
	height: 500px;
	border: 1px #bbb solid;
	position: relative;
	overflow: hidden;
	margin: 50px auto;
}

#content {
	height: 2500px;
	position: absolute;
	left: 0;
	top: 0;
	background:url(img/scrollTest.jpg);
}

.scrollDiv {
	width: 18px;
	position: absolute;
	top: 0;
	background: #666;
	border-radius: 10px;
}
</style>
</head>

<body>
	<div id="mainBox">
		<div id="content"></div>
	</div>
	<p></p>
	<script type="text/javascript">
		var doc = document;
		var _wheelData = -1;
		var mainBox = doc.getElementById('mainBox');
		function bind(obj, type, handler) {
			var node = typeof obj == "string" ? $(obj) : obj;
			if (node.addEventListener) {
				node.addEventListener(type, handler, false);
			} else if (node.attachEvent) {
				node.attachEvent('on' + type, handler);
			} else {
				node['on' + type] = handler;
			}
		}
		function mouseWheel(obj, handler) {
			var node = typeof obj == "string" ? $(obj) : obj;
			bind(node, 'mousewheel', function(event) {
				var data = -getWheelData(event);
				handler(data);
				if (document.all) {
					window.event.returnValue = false;
				} else {
					event.preventDefault();
				}

			});
			//火狐
			bind(node, 'DOMMouseScroll', function(event) {
				var data = getWheelData(event);
				handler(data);
				event.preventDefault();
			});
			function getWheelData(event) {
				var e = event || window.event;
				return e.wheelDelta ? e.wheelDelta : e.detail * 40;
			}
		}

		function addScroll() {
			this.init.apply(this, arguments);
		}
		addScroll.prototype = {
			init : function(mainBox, contentBox, className) {
				var mainBox = doc.getElementById(mainBox);
				var contentBox = doc.getElementById(contentBox);
				var scrollDiv = this._createScroll(mainBox, className);
				this._resizeScorll(scrollDiv, mainBox, contentBox);
				this._tragScroll(scrollDiv, mainBox, contentBox);
				this._wheelChange(scrollDiv, mainBox, contentBox);
				this._clickScroll(scrollDiv, mainBox, contentBox);
			},
			//创建滚动条
			_createScroll : function(mainBox, className) {
				var _scrollBox = doc.createElement('div')
				var _scroll = doc.createElement('div');
				var span = doc.createElement('span');
				_scrollBox.appendChild(_scroll);
				_scroll.appendChild(span);
				_scroll.className = className;
				mainBox.appendChild(_scrollBox);
				return _scroll;
			},
			//调整滚动条
			_resizeScorll : function(element, mainBox, contentBox) {
				var p = element.parentNode;
				var conHeight = contentBox.offsetHeight;
				var _width = mainBox.clientWidth;
				var _height = mainBox.clientHeight;
				var _scrollWidth = element.offsetWidth;
				var _left = _width - _scrollWidth;
				p.style.width = _scrollWidth + "px";
				p.style.height = _height + "px";
				p.style.left = _left + "px";
				p.style.position = "absolute";
				p.style.background = "#ccc";
				contentBox.style.width = (mainBox.offsetWidth - _scrollWidth)
						+ "px";
				var _scrollHeight = parseInt(_height * (_height / conHeight));
				if (_scrollHeight >= mainBox.clientHeight) {
					element.parentNode.style.display = "none";
				}
				element.style.height = _scrollHeight + "px";
			},
			//拖动滚动条
			_tragScroll : function(element, mainBox, contentBox) {
				var mainHeight = mainBox.clientHeight;
				element.onmousedown = function(event) {
					var _this = this;
					var _scrollTop = element.offsetTop;
					var e = event || window.event;
					var top = e.clientY;
					//this.οnmοusemοve=scrollGo;
					document.onmousemove = scrollGo;
					document.onmouseup = function(event) {
						this.onmousemove = null;
					}
					function scrollGo(event) {
						var e = event || window.event;
						var _top = e.clientY;
						var _t = _top - top + _scrollTop;
						if (_t > (mainHeight - element.offsetHeight)) {
							_t = mainHeight - element.offsetHeight;
						}
						if (_t <= 0) {
							_t = 0;
						}
						element.style.top = _t + "px";
						contentBox.style.top = -_t
								* (contentBox.offsetHeight / mainBox.offsetHeight)
								+ "px";
						_wheelData = _t;
					}
				}
				element.onmouseover = function() {
					this.style.background = "#444";
				}
				element.onmouseout = function() {
					this.style.background = "#666";
				}
			},
			//鼠标滚轮滚动，滚动条滚动
			_wheelChange : function(element, mainBox, contentBox) {
				var node = typeof mainBox == "string" ? $(mainBox) : mainBox;
				var flag = 0, rate = 0, wheelFlag = 0;
				if (node) {
					mouseWheel(
							node,
							function(data) {
								wheelFlag += data;
								if (_wheelData >= 0) {
									flag = _wheelData;
									element.style.top = flag + "px";
									wheelFlag = _wheelData * 12;
									_wheelData = -1;
								} else {
									flag = wheelFlag / 12;
								}
								if (flag <= 0) {
									flag = 0;
									wheelFlag = 0;
								}
								if (flag >= (mainBox.offsetHeight - element.offsetHeight)) {
									flag = (mainBox.clientHeight - element.offsetHeight);
									wheelFlag = (mainBox.clientHeight - element.offsetHeight) * 12;

								}
								element.style.top = flag + "px";
								contentBox.style.top = -flag
										* (contentBox.offsetHeight / mainBox.offsetHeight)
										+ "px";
							});
				}
			},
			_clickScroll : function(element, mainBox, contentBox) {
				var p = element.parentNode;
				p.onclick = function(event) {
					var e = event || window.event;
					var t = e.target || e.srcElement;
					var sTop = document.documentElement.scrollTop > 0 ? document.documentElement.scrollTop
							: document.body.scrollTop;
					var top = mainBox.offsetTop;
					var _top = e.clientY + sTop - top - element.offsetHeight
							/ 2;
					if (_top <= 0) {
						_top = 0;
					}
					if (_top >= (mainBox.clientHeight - element.offsetHeight)) {
						_top = mainBox.clientHeight - element.offsetHeight;
					}
					if (t != element) {
						element.style.top = _top + "px";
						contentBox.style.top = -_top
								* (contentBox.offsetHeight / mainBox.offsetHeight)
								+ "px";
						_wheelData = _top;
					}
				}
			}
		}
		new addScroll('mainBox', 'content', 'scrollDiv');
	</script>
</body>
</html>