内部添加滚动内容

Myth丶恋晨 2021-07-25 02:32 327阅读 0赞

**要点**
    确定滑动方块的高度
    	总边框高度和总内容高度的比值和滑动方块的高度和滑动条的高度相等
    
    确定滑块下滑的距离占总滑动条的比例和内容上滑的距离占总内容高度的比例相等
    
    判断鼠标滑轮滚动方向后，设定每次滑动的距离，再加上到原先拖动时要改变的距离内

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			*{ 
    				margin:0px;
    				padding: 0px;
    			}
    			.box{ 
    				height:500px;
    				width:500px;
    				border:solid 1px pink;
    				position: relative;
    				margin:20px auto;
    				overflow: hidden;
    			}
    			.bar{ 
    				height:500px;
    				width: 20px;
    				background-color: gray;
    				position:absolute;
    				right: 0px;
    				top:0px;
    				
    			}
    			.content{ 
    				padding: 20px;
    				position: absolute;
    				left:0px;
    				top:0px;
    			}
    			.slidebar{ 
    				height:50px;
    				width:20px;
    				right:0px;
    				top:0px;
    				position: absolute;
    				background-color: orange;
    			}
    			body{ 
    				height: 2000px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box">
    			<div class="content">
    			<p>西城法院发布“家事审判改革工作白皮书”
    
    老年和青年群体 成为离婚高发人群
    
    本报讯（记者 叶婉 朱健勇）11月28日，西城法院发布“家事审判改革工作白皮书”，对五年来离婚案件情况进行统计分析，结果发现，该院所收离婚案当事人年龄分布呈现两极化，不仅60岁以上的老年人占比大幅提升，80后、90后的占比也超过三成。同时，人身安全保护令签发率从2016年的7%上升至2019年的42.4%，反映出受到家暴侵害的当事人维权意识不断提升。
    
    近年来，随着北京中心城区社会经济结构变化和文化变迁，西城区离婚、继承、赡养等各类家事纠纷频发，家事案件收案量明显增加。在北京西城法院收案量前五类家事案件中，离婚案件当事人年龄分布两极化，58.2%的离婚案件由60岁以上老人提起，31.6%的案件则由80后、90后提出，老年和青年群体已经成为离婚高发人群；继承案件的事实查明难、审理周期长，继承案件一般涉案当事人多、法律关系交织庞杂，涉案财产类型多样且涉及评估、鉴定等程序；人身安全保护令签发率不断提高，从2016年的7%上升至2019年的42.4%，反映出受到家暴侵害的当事人维权意识不断提升。
    
    此外，涉行为能力和成年人监护案件增幅显著，2014年至2018年，行为能力案件量增长近3倍，监护案件量增长近10倍；离婚后财产纠纷案件中涉及房屋所有权分割的案件占比七成以上。西城法院发布“家事审判改革工作白皮书”
    
    老年和青年群体 成为离婚高发人群
    
    本报讯（记者 叶婉 朱健勇）11月28日，西城法院发布“家事审判改革工作白皮书”，对五年来离婚案件情况进行统计分析，结果发现，该院所收离婚案当事人年龄分布呈现两极化，不仅60岁以上的老年人占比大幅提升，80后、90后的占比也超过三成。同时，人身安全保护令签发率从2016年的7%上升至2019年的42.4%，反映出受到家暴侵害的当事人维权意识不断提升。
    
    近年来，随着北京中心城区社会经济结构变化和文化变迁，西城区离婚、继承、赡养等各类家事纠纷频发，家事案件收案量明显增加。在北京西城法院收案量前五类家事案件中，离婚案件当事人年龄分布两极化，58.2%的离婚案件由60岁以上老人提起，31.6%的案件则由80后、90后提出，老年和青年群体已经成为离婚高发人群；继承案件的事实查明难、审理周期长，继承案件一般涉案当事人多、法律关系交织庞杂，涉案财产类型多样且涉及评估、鉴定等程序；人身安全保护令签发率不断提高，从2016年的7%上升至2019年的42.4%，反映出受到家暴侵害的当事人维权意识不断提升。
    
    此外，涉行为能力和成年人监护案件增幅显著，2014年至2018年，行为能力案件量增长近3倍，监护案件量增长近10倍；离婚后财产纠纷案件中涉及房屋所有权分割的案件占比七成以上。西城法院发布“家事审判改革工作白皮书”
    
    老年和青年群体 成为离婚高发人群
    
    本报讯（记者 叶婉 朱健勇）11月28日，西城法院发布“家事审判改革工作白皮书”，对五年来离婚案件情况进行统计分析，结果发现，该院所收离婚案当事人年龄分布呈现两极化，不仅60岁以上的老年人占比大幅提升，80后、90后的占比也超过三成。同时，人身安全保护令签发率从2016年的7%上升至2019年的42.4%，反映出受到家暴侵害的当事人维权意识不断提升。
    
    近年来，随着北京中心城区社会经济结构变化和文化变迁，西城区离婚、继承、赡养等各类家事纠纷频发，家事案件收案量明显增加。在北京西城法院收案量前五类家事案件中，离婚案件当事人年龄分布两极化，58.2%的离婚案件由60岁以上老人提起，31.6%的案件则由80后、90后提出，老年和青年群体已经成为离婚高发人群；继承案件的事实查明难、审理周期长，继承案件一般涉案当事人多、法律关系交织庞杂，涉案财产类型多样且涉及评估、鉴定等程序；人身安全保护令签发率不断提高，从2016年的7%上升至2019年的42.4%，反映出受到家暴侵害的当事人维权意识不断提升。
    
    此外，涉行为能力和成年人监护案件增幅显著，2014年至2018年，行为能力案件量增长近3倍，监护案件量增长近10倍；离婚后财产纠纷案件中涉及房屋所有权分割的案件占比七成以上。</p>
    			</div>
    			<div class="bar"></div>
    			<div class="slidebar"></div>
    		</div>
    		
    		<script>
    			var box=document.querySelector(".box");
    			var content=document.querySelector(".content");
    			var bar=document.querySelector(".bar");
    			var slidebar=document.querySelector(".slidebar");
    			
    			//设置滑动方块相对于内容的高度
    			var rate=box.clientHeight/content.clientHeight;
    			var barHeight=rate*bar.clientHeight;
    			slidebar.style.height=barHeight+"px";
    			//是否移动开关
    			var flag=false
    			var sby;
    			var bby;
    			
    			var delY=0;
    			
    			slidebar.onmousedown=function(event){ 
    				var event=event||window.event;
    				flag=true;
    				sby=event.clientY;
    				bby=slidebar.offsetTop;
    				event.preventDefault();//取消鼠标移动会选定蓝色内容的默认行为
    			}
    			var result=0;
    			
    			/*滑轮移动位置检验*/
    			function checked()
    			{ 
    				if(result<0)
    					{ 
    						result=0;
    					}
    					//这么减是因为滑动条的高度已被改变
    					if(result>bar.clientHeight-slidebar.clientHeight)
    					{ 
    						result=bar.clientHeight-slidebar.clientHeight;
    					}
    					
    					slidebar.style.top=result+"px";
    					
    					/*滚动条改变同时修改内容高度*/
    					//内容上滑的距离的占总内容的比例，应该和滑块下滑的距离占总滑动条的比例相等
    					content.style.top=-result/rate+"px";
    			}
    			
    			
    			document.onmousemove=function(event)
    			{ 
    				var event=event||window.event;
    				if(flag){ 
    					var mby=event.clientY;
    					
    					result=mby-sby+bby;
    					
    					checked();
    				}
    			}
    			//鼠标抬起
    			document.onmouseup=function()
    			{ 
    				flag=false;
    			}
    			
    			/*鼠标滚动事件*/
    			
    			function mouseScroll(event)
    			{ 
    				var event=event||window.event;
    				
    				/*取消外部滚轮跟随内部滚轮动的默认行为,这不是冒泡传递*/
    				if(event.preventDefault)
    				{ 
    					event.preventDefault();
    				}else{ 
    					event.returnValue=false;
    				}				
    				
    				
    				
    				//判断浏览器类型
    				var direction=0;
    				if(event.wheelDelta)
    				{ 
    					direction=event.wheelDelta>0 ? 1:-1;
    				}else{ 
    					direction=event.detail<0 ? 1:-1;
    				}
    				
    				//向下滚动
    				
    				result+=-direction*10;  
    		
    				checked();
    				
    				
    				
    			}
    							
    				//非火狐
    				box.onmousewheel=mouseScroll;
    				//火狐
    				try{ 
    					box.addEventListener("DOMMouseScroll",mouseScroll,false);
    				}catch(error)
    				{ 
    					
    				}
    		</script>
    	</body>
    </html>