首页新闻互联网通信3GIT数码手机家电新知

讨论自定义滚动条样式分步html>css>js代码实现的方法


自定义滚动条样式分步html>css>js代码实现的方法
本站收录这篇文章讨论自定义滚动条样式分步html>css>js代码实现的方法,详细解说文章中相关自定义 滚动条 技术与知识,欢迎能给大家一些在这方面的支持和帮助!下面是详细内容:

HTML结构

<p 

css结构

    .content{
			width: 500px;
			height: 400px;
			border:1px solid;
			overflow: hidden;
			padding:40px;
			margin:50px auto;
			position: relative;
		}
		.scroll-wrap{
			position: absolute;
			width: 10px;
			height: 100%;
			background: #d8d4d4;
			top:0;
			right:0;
		}
		.scroll-wrap span{
			display: block;
			width: 5px;
			height: 100px;
			background: red;
			border-radius: 10px;
			margin:0 auto;
			position: relative;
		}

js代码

<script>
		var wrapScroll=document.getElementById("wrapScroll")
		var tapScroll=wrapScroll.getElementsByTagName("span")[0];
		var contentIn=document.getElementById("countent");
		var content=document.getElementById("content")
		tapScroll.onmousedown=function(){
			var e=ewindow.event;
			var dowY=e.pageY-this.offsetTop;
			document.onmousemove=function(e){
				var ev=ewindow.event;
				var movY=ev.pageY-dowY;
				conmon(movY)
			}
			document.onmouseup=function(){
				document.onmousemove=null;
			}
		}

		content.onmousewheel=function(event){
			var stemp=tapScroll.offsetTop-content.offsetTop+50;
			conmon(stemp)
		}
		function conmon(num){
			var dela=wheel(event)
			num=num<0?0:num;
			var c=wrapScroll.offsetHeight-tapScroll.offsetHeight 	
			dela>0?num-=10:num+=10;			
			num=num>c?c:num
			tapScroll.style.top=num+"px";
			var speed=(contentIn.offsetHeight-content.offsetHeight)/c+0.2;
			console.log(speed)
			contentIn.style.marginTop=-(speed*num)+"px"
		}
		//滚轮事件封装
		function wheel(event){
			var e=eventwindow.event;
			var delta=0;//次数
			if(e.wheelDelta){
				delta=e.wheelDelta/120;
			}else if(e.detail){
				delta=e.detail/3;
			}
			if(e.preventDefault){
				e.preventDefault()
			}
			return delta
		}
	</script>

End. 教程到这里讲完了,阅读是否有所收获呢?本站还提供有自定义 滚动条 相关的内容,欢迎继续阅读。

关于我们法律声明免责声明问题提交留言给网站联系我们

本站资料大多收集而来,只做参考,所有权归原版所有,有异议请留言,邮箱:sdpos@163.com