自定义滚动条

最新推荐文章于 2024-06-20 16:16:46 发布

chenyou7445

最新推荐文章于 2024-06-20 16:16:46 发布

阅读量61

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/u/1865767/blog/466057

版权

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
		<title>效果：鼠标在图片上滚动，图片放大或缩小</title>
		<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			-moz-user-select: none;
		}
			#scroll {
				width: 10px;
				height: 35px;
				background-color: #fff;
				position: absolute;
				right: 5px;
			}
			#main	{
				width: 502px;
				height: 350px;
				/*background: url(images/signup_icon.png);*/
				background-color: #555;
				margin: 0 auto;
				position: relative;
				top:50px;
				overflow: hidden;
			}
			#main ul li {
				width: 100%;
				height: 50px;
				text-align: center;
				font-size: 30px;
				color: #fff;
			}
			#ulList {
				position: absolute;
			}
		</style>
	</head>
	<body onselectstart="return false"> <!--禁止选中-->
		<div id="main">
			<!-- <img id="aaa" src="images/scroll.jpg" /> -->
			<div id="scroll"></div>
			<ul id="ulList">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>				
			</ul>
		</div>
		<script language="JavaScript" type="text/javascript">
			function dragDrop() {
				var VVG = {};
				VVG.DOM = {
					$:function(id) {
						return typeof id == 'string' ? document.getElementById(id) : id;
					},
					bindEvent:function(node,type,func) { //绑定事件方法
						if(node.addEventListener) {
							node.addEventListener(type,func,false); 
							// node:文档节点、document、window 或 XMLHttpRequest;  type:字符串，事件名称，不含“on”; false:表示该元素在事件的“冒泡阶段”（由内向外传递时）响应时间,true:表示该元素在事件的“捕获阶段”（由外往内传递时）响应事件；
						} else if (node.attachEvent) {
							node.attachEvent('on' + type,func);
						} else {
							node['on' + type] = func;
						}
					},
					getEvent:function(event) {	//获取事件
						return event ? event:window.event;
					},
					getTarget:function(event) { //获取事件
						return event.target || event.srcElement;
					}
				};
				var Drop = function() {
					var dragging = null; //初始化 拖动所设标志位
					var sTop = 0;
					var mouseClientY = 0; //初始鼠标位置 高度值
					function drag(event) {	//	事件执行函数
						event = VVG.DOM.getEvent(event);
						var target = VVG.DOM.getTarget(event);
						var main = VVG.DOM.$('main');
						var scroll = VVG.DOM.$('scroll');
						sTop = parseInt(sTop);
						var top = event.clientY + sTop - mouseClientY; // 鼠标现在位置 + 滚动条TOP值 - 鼠标按下时位置
						var liHeight = main.getElementsByTagName('li')[0].offsetHeight;
						var liNum = main.getElementsByTagName('li').length - (main.offsetHeight / liHeight);
						var ulList = VVG.DOM.$('ulList');	
						var scrollTop = scroll.offsetTop;	
						var liPx = 	liNum * liHeight / (main.offsetHeight - scroll.offsetHeight);	// li平均值		
						if(event.type == 'mousedown') {
							if(target.id == 'scroll') { // 获取滚动条，只点击它才执行
								if(event.button == 2) {	// 只有点击鼠标左键执行
									return event.returnValue = false; // 解除默认事件发生
								} else {
									dragging = target;
									mouseClientY = event.clientY; //获取鼠标的top值
									sTop = dragging.style.top != '' ? dragging.style.top : 0; // 获取滚动条的TOP值	
								}
							}
								
						} else if (event.type == 'mousemove'){
							if(dragging) {

								if (scrollTop < 0) {
									dragging.style.top = '0px';
									ulList.style.top = '0px';
								} else if(scrollTop > (main.offsetHeight - scroll.offsetHeight)) {
									dragging.style.top = (main.offsetHeight - scroll.offsetHeight) + 'px';
									ulList.style.top = -liNum * liHeight + 'px';
								} else {
									dragging.style.top = top + 'px'; 
									ulList.style.top = -liPx * top + 'px'; 
								}
								
							}							
						} else if (event.type == 'mouseup') {
							dragging = null;
						} else if (event.type == 'mousewheel' || event.type == 'DOMMouseScroll') {
							var detail = event.detail *4 || parseInt(-event.wheelDelta/10);
							if (scrollTop < 0) {
								scroll.style.top = '0px';
								ulList.style.top = '0px';
							} else if(scrollTop > (main.offsetHeight - scroll.offsetHeight)) {
								scroll.style.top = (main.offsetHeight - scroll.offsetHeight) + 'px';
								ulList.style.top = -liNum * liHeight + 'px';
							} else {
								scroll.style.top = scrollTop + detail + 'px'; // 滚动条TOP值  + 滚轮值 = 滚动条现在位置
								ulList.style.top = -(scrollTop + detail) * liPx + 'px'; // （滚动条TOP值 + 滚轮值）* li平均值 = 滚动一次 UL向上移动的TOP值
							}							
						}				
					};	
					return {
						dragStart: function() {
							//绑定事件
							VVG.DOM.bindEvent(main, func(), drag);
							VVG.DOM.bindEvent(document, "mousedown", drag);
							VVG.DOM.bindEvent(main, "mousemove", drag);
							VVG.DOM.bindEvent(document, "mouseup", drag);						
						}()
					}										
				}();
			}
dragDrop();


function func() {
	return (/firefox/i).test(navigator.userAgent) ? 'DOMMouseScroll':'mousewheel';
}
		</script>
	</body>
</html>

转载于:https://my.oschina.net/u/1865767/blog/466057

chenyou7445

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义滚动条

<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html"char...
复制链接

扫一扫