JS原生之----滚动条

最新推荐文章于 2024-07-16 17:26:59 发布

玉米_欣

最新推荐文章于 2024-07-16 17:26:59 发布

阅读量1.9k

点赞数

分类专栏：前端 H5 js 文章标签： css html javascript function event

本文链接：https://blog.csdn.net/u012967849/article/details/52592568

版权

前端同时被 3 个专栏收录

49 篇文章 0 订阅

订阅专栏

21 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滚动条</title>
		<style>
        * {margin: 0;padding: 0;}
        html,body {width: 100%;height: 100%;}
        #box { width: 100%; height: 100%; overflow: hidden; }
        .ball { width: 100%; height: 500px; }
        #scroll {
            width: 6px; height: 96%;
            position: fixed; top: 2%; right: 5px;
            border-radius: 3px; background-color: rgba(235, 233, 233, 0.5);
            z-index: 9998; opacity: 0;
        }
        #scrollBar {
            position: absolute; left: 0; top: 0;
            z-index: 9999;
            width: 6px; height: 20px;
            border-radius: 3px;
            background-color: #383838;
        }
    </style>
	</head>
	<body style="overflow:hidden;">
    <div id="box">
        <div id="content">
             <p class="ball" style="background-color:red;">赞</p>
            <p class="ball" style="background-color:blue;">玉</p>
            <p class="ball" style="background-color:yellow;">米</p>
            <p class="ball" style="background-color:green;">欣</p>
            <p class="ball" style="background-color:gray;">评</p>
            <p class="ball" style="background-color:orange;">轮</p>
            <p class="ball" style="background-color:pink;">吧</p>
        </div>
    </div>
    <div id="scroll">
        <div id="scrollBar"></div>
    </div>
	</body>
	<script type="text/javascript" src="js/draggable.js" ></script>
	<script>
		onload = function(){
			var scrollDiv = document.getElementById("scroll");
			var scrollBar = document.getElementById("scrollBar");
			var content = document.getElementById("content");
			var box = document.getElementById("box");
			
			/*滚轮事件 火狐：DOMMouseScroll(必须用2级事件写) 其余：onmousewheel(一级事件，用2级事件写也可以：mousewheel)
			 * 火狐中:e.detail>0时向下滚动，e.detail<0时向上滚动
			 * 其余浏览器包括IE: e.wheelDelta<0时表示向下滚动，e.wheelDelta>0时向上滚动
			 * 用到的公式：滚动距离/（页面高-可视窗口高）  == bar距div的top/(滚动条div-滚动条bar)
			 * 代码:box.scrollTop/(content.offsetHeight-document.body.offsetHeight)  == scrollBar.style.top/(scrollDiv.offsetHeight - scrollBar.offsetHeight);
			 */
			/*box.addEventListener("mousewheel",function(e){
				e =e||event;
				//console.log(e.wheelDelta);
				if(e.wheelDelta<0){
					box.scrollTop += 50; //滚动的距离
				}else{
					box.scrollTop -=50;
				}
				scrollBar.style.top = box.scrollTop/(content.offsetHeight-document.body.offsetHeight) *(scrollDiv.offsetHeight - scrollBar.offsetHeight)+"px";
				if(box.scrollTop<300){
					scrollDiv.style.opacity = 0;
				}else{
					scrollDiv.style.opacity = 1;
				}
			})
			
			box.addEventListener("DOMMouseScroll",function(e){
				e =e||event;
				//console.log(e.detail);
				if(e.detail>0){
					box.scrollTop +=50;
				}else{
					box.scrollTop -=50;
				}
				//兼容document.body.offsetHeight  
				console.log(document.body.offsetHeight);
				scrollBar.style.top = box.scrollTop/(content.offsetHeight-document.body.offsetHeight)*(scrollDiv.offsetHeight - scrollBar.offsetHeight)+"px";
				if(box.scrollTop <300){
					scrollDiv.style.opacity = 0;
				}else{
					scrollDiv.style.opacity = 1;
				}
			})
			*/
			/*
			 * 由上述整理精炼得到如下代码：
			 */
			
			function scrollFunc(e){ //e.type :返回的值是mousewheel或是DOMMouseScroll
				e =e||even;
				var d = null;
				if(e.type == "mousewheel"){
					d = e.wheelDelta;
				}else {
					d = -e.detail;
				}
				
				if(d<0){
					box.scrollTop +=50;
				}else{
					box.scrollTop -=50;
				}
				setScroll();
				if(box.scrollTop<300){
					scrollDiv.style.opacity = 0;
				}else{
					scrollDiv.style.opacity = 1;
				}
				
			}
		
		
		box.addEventListener("mousewheel",scrollFunc);
		box.addEventListener("DOMMouseScroll",scrollFunc);
		//当对窗口大小进行调整时
		window.addEventListener("resize",function(e){
			setScroll();
		});			
			function setScroll(){
				scrollBar.style.top = box.scrollTop/(content.offsetHeight-document.body.offsetHeight)*(scrollDiv.offsetHeight - scrollBar.offsetHeight)+"px";
			}
			//点击scrollBar可以拖拽，并且页面随之滑动
			draggable(scrollDiv,scrollBar,{x:false},function(){
				box.scrollTop = this.offsetTop *(content.offsetHeight -document.documentElement.offsetHeight)/(scrollDiv.offsetHeight -this.offsetHeight);
			});
			//双击回到最顶部
			scrollDiv.addEventListener("dblclick",function(){
				box.scrollTop=0;
				scrollBar.style.top =0;
				
			})
		}
		
		
	</script>
</html>

封装：draggable.js

/*
*parentObj 父元素范围
*ele移动对象
*param 想要移动的方向
*/
function draggable(parentObj,ele,param,callback){
//判断有没有定位  调用getStyle js封装好的一个函数，获取样式
if(getStyle(ele,"position") != "absolute")return ;
	//确定移动方向（给参数设定默认值）
	param = param ||{x:true,y:true};
	if(param.x == false){
		param.x = false;
		param.y = true;
	}
	if(param.y ==false){
		param.x =true;
		param.y =false;
	}
	//让这个回调函数成为移动对象的一个函数（不写这个，callback就是window的）
	ele.callback = callback || function(){};
	//判断移动的边界值距左边  还有上边的距离(移动的范围)
	var section ={
		maxLeft :parentObj.offsetWidth - ele.offsetWidth,
		maxTop :parentObj.offsetHeight - ele.offsetHeight
	}
	ele.οnmοusedοwn=function(e){
		e = e||event;
		var disX = e.offsetX,disY = e.offsetY;
		document.onmousemove =function(e){
			e = e||event;
			if(param.x){
			//计算拖拽元素在父元素内的坐标
			//公式：鼠标页面坐标 - 鼠标跟拖拽的父元素的相对坐标 - 父元素页面坐标(调用函数offset())
				var _left = e.clientX - disX - offset(parentObj).left;	
				//Math.min(_left,section.maxLeft) 当_left > section.maxLeft 时 就相当于出界了，，取最小值就很好的控制了这一点
				_left = (_left<0 ? 0:(Math.min(_left,section.maxLeft))); 
				ele.style.left = _left +"px";
			}
			if(param.y){
				var _top = e.clientY - disY - offset(parentObj).top;
				_top = (_top<0 ? 0:(Math.min(_top,section.maxTop))); 
				ele.style.top = _top +"px";
			}
			//每移动一次，执行一次回调函数
			ele.callback();
		}
		
	}
	document.οnmοuseup=function(){
		document.onmousemove =null;		
	}
}

//函数的懒加载 获取样式
function getStyle(obj, attr) {
	if(obj.currentStyle) {
		getStyle = function(obj, attr){
			return obj.currentStyle[attr];
		}
		return obj.currentStyle[attr];
	} else {
		getStyle = function(obj, attr){
			return getComputedStyle(obj,null)[attr];
		}
		return getComputedStyle(obj,null)[attr];
	}
}

//获取一个元素在页面的绝对位置
function offset(obj) {
	var _left = 0, _top = 0;
	while(obj) {
		_left += obj.offsetLeft;
		_top += obj.offsetTop;
		obj = obj.offsetParent;
	}
	return {left:_left, top: _top};
}