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

最新推荐文章于 2023-08-02 14:20:47 发布

神奇大叔

最新推荐文章于 2023-08-02 14:20:47 发布

阅读量1w

点赞数 2

分类专栏： javaScript 文章标签： javaScript

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103285242

版权

javaScript 专栏收录该内容

127 篇文章 6 订阅

订阅专栏

返回不带px的数值,没用负数,最小为0

.scrollTop	  竖直滚动条到顶部的距离,即浏览器视口外的高度
.scrollLeft  水平滚动条到最左边的距离
.scrollHeight 滚动内容区域的高度

返回整个窗口的滚动条数值

	非ie
		
		返回整个窗口的滚动条数值
			document.documentElement.scrollTop
				竖直滚动条到顶部的距离
			document.documentElement.scrollLeft
				水平滚动条到最左边的距离

ie和非ie获得滚动条的兼容写法
		
	var temp=document.documentElement.scrollTop||document.body.scrollTop

在这里插入图片描述

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

<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>

神奇大叔

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js 滚动条属性、设置滚动条滚动速度

返回不带px的数值,没用负数,最小为0.scrollTop 竖直滚动条到顶部的距离.scrollLeft 水平滚动条到最左边的距离返回整个窗口的滚动条数值非ie 返回整个窗口的滚动条数值 document.documentElement.scrollTop 竖直滚动条到顶部的距离 document.documentElement.scrollLe...
复制链接

扫一扫