Barres de défilement personnalisées : étapes d'implémentation distinctes pour le code HTML, CSS et JS

Structure 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(&#39;DOMMouseScroll&#39;,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>

Structure 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;
		}

Code 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=e||window.event;
			var dowY=e.pageY-this.offsetTop;
			document.onmousemove=function(e){
				var ev=e||window.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=event||window.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>

Recommandations associées :

Exemple détaillé du style de barre de défilement personnalisé CSS3

Explication détaillée Comment écrire un style de barre de défilement personnalisé CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!