js 滚动条属性、设置滚动条滚动速度

冷不防 2021-07-24 20:07 1925阅读 0赞

返回不带px的数值,没用负数,最小为0
    
    .scrollTop	  竖直滚动条到顶部的距离,即浏览器视口外的高度
    .scrollLeft  水平滚动条到最左边的距离
    .scrollHeight 滚动内容区域的高度
    
    返回整个窗口的滚动条数值
    
    	非ie
    		
    		返回整个窗口的滚动条数值
    			document.documentElement.scrollTop
    				竖直滚动条到顶部的距离
    			document.documentElement.scrollLeft
    				水平滚动条到最左边的距离
    
    ie和非ie获得滚动条的兼容写法
    		
    	var temp=document.documentElement.scrollTop||document.body.scrollTop

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

设置滚动条速度代码示例：

<html>
    	<head>
    		<meta charset="utf-8">
    		<title>滚动事件</title>
    		<style>
    			div{ 
    				height:2000px;
    				
    			}
    			button{ 
    				position:fixed;
    				bottom: 100px;
    				right: 100px;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    		<button class="btn">去那里</button>
    	
    	
    		</div>
    		
    		<script>
    			var button=document.querySelector("button");
    			
    			button.onclick=function(){ 
    				var id=setInterval(function(){ 
    					if(document.documentElement.scrollTop>0)
    					{ 
    						document.documentElement.scrollTop-=100;
    						
    						//当滑动条距顶部为0时,结束间隔任务
    						if(document.documentElement.scrollTop==0)
    						{ 
    							clearInterval(id);
    						}
    					}
    				},500);
    				
    			}
    			
    		</script>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/b69dd57f1f264f1ebee3409e4260d14d.png