注册 | 登陆
您的位置:阿里西西 > 前端技术 > 脚本技术 > 详细内容

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

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

HTML结构

<p class="content" id="content">
		<p class="con-scroll" id="countent">
			js对于鼠标滚轮事件的监听
			<br>
			2017年08月25日 18:17:56
			<br>
			阅读数:10072
			<br>
			需求:
			<br>

			通过鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的上下滚动后触发不同的事件。

			<br>
			实现:
			<br>

			通过js对鼠标滚轮的事件进行监听。
			<br>

			描述:
			<br>

			首先,不同的浏览器有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件。
			<br>
			具体实现:1. 需要添加事件监听,代码如下:兼容firefox采用addEventListener监听
			<br>



			 /*监听鼠标滚动事件
			 <br>
			         * 1.火狐的是:DOMMouseScroll;
			         <br>
			         * 2.IE/Opera/Chrome:直接添加事件*/
			         <br>
			        if(document.addEventListener){
			        <br>
			            document.addEventListener('DOMMouseScroll',scrollFunc,false);
			            <br>
			        }//W3C
			        <br>
			        window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
			        <br>

			var scrollFunc=function(e){
			<br>
			            e=e  window.event;
			            <br>
			            if(e.wheelDelta){//IE/Opera/Chrome
			            <br>
			            	//自定义事件:编写具体的实现逻辑
			            	<br>
			                mouseScroll();
			                <br>
			            }else if(e.detail){//Firefox
			            <br>
			            	//自定义事件:编写具体的实现逻辑
			            	<br>
			                mouseScroll();
			                <br>
			            }
			            <br>
			        }
			        <br>

			简要说明:
			<br>
			判断滚轮向上或向下在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个 值,detail只取±3,wheelDelta只取±150,其中正数表示为向下,负数表示向上
			<br>

			版权声明:本文为博主原创文章,未经博主允许不得转载。	https://blog.csdn.net/qq_35647781/article/details/77584977
			<br>
		</p>
		<p class="scroll-wrap" id="wrapScroll">
			<span></span>
		</p>
	</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. 教程到这里讲完了,阅读是否有所收获呢?本站还提供有自定义 滚动条 相关的内容,欢迎继续阅读。

更多关于 自定义 滚动条 的文章
相关阅读

相关排行总榜

网页教程

网站运营

特效排行

教你如何使用js+CSS写出类似FLASH动画的网
一款CSS3制作的带尖角的按钮实例代码
目前主流浏览器对于HTML5与CSS3的支持情况
全面剖析前端Ajax技术原理及知识
分享一个HTML5 + JavaScript实现Flash动画
用PHOTOSHOP把美女头画像制作成漂亮的仿手
淘宝网及新浪网等几大官方IP查询API接口地
用Photoshop制作淘宝大促双十一电商促销宣
用HTML5+css3制作HTML5验证的网页表单
通过html5代码实现在网页中插入和播放mp4
如何让您的微信公众号内容快速增加阅读量
网站用户界面设计(网页设计)命名规范
分享一些企业微信营销推广的技巧与经验
可以借鉴和学习的小米模式4大经验要素
SEO优化中网站title标题优化总结及经验分
为什么说建站要从网站用户忠诚度着手,知
一个优秀的SEM进行百度搜索推广账号架构经
谈谈从了解用户开始互联网推广的营销策略
谈谈新手运营网站如何做好网站的广告位投
清理您网站上的黑链的几个招数
JS制作循环上下左右平移转圈的图层特效
原生js写的贪食蛇网页版小游戏特效代码,
用CSS3实现的addidas阿迪达斯标志LOGO特效
HTML5打造的酷炫3D 360度图片立体浏览特效
通用canvas代码实现的JS画圆圈动画特效代
通过HTML5+SVG制作奔跑的小马驹动画特效
jquery实现拖拽进度条并显示百分比的特效
用HTML5+canvas代码绘制的星空月亮图案特
简单实用的纯CSS实现的横向多级导航特效代
原生JS写的一个书架式的图片缩放滚动展示