javascript学习-scroll

最新推荐文章于 2021-06-30 07:29:38 发布

加油吧qaq

最新推荐文章于 2021-06-30 07:29:38 发布

阅读量496

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43368682/article/details/107678619

版权

scroll家族

1、ScrollWidth和scrollHeight

获取盒子的宽高。调用者为代理元素。不包括border和margin。如下：

scrollWidth =宽度+填充;
scrollHeight =高度+填充；
scrollHeight有一个特点：如果文字超过了盒子，高度为内容的高（包括超过的内容）；不超过，则是盒子本身高度。
例子：

<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				border: 20px solid deeppink;
				position: relative;
				padding: 40px;
			}
			#d1{
				width: 200px;
				height: 200px;
				color: skyblue;
				border: 40px solid purple;
				padding: 20px;
				margin: 100px;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
		
		<script type="text/javascript">
			var d1 = document.querySelector("#d1")
			console.log([d1])
		</script>
	</body>

其中ScrollWidth和scrollHeight都是240，是200+20+20
在这里插入图片描述

2、scrollTop和scrollLeft

网页被卷去的头部和左边的部分。

例如说，一个网页往上滚动的时候，上面的部分自然被浏览器遮挡了，遮挡的高度就是scrollTop。
最兼容的获取方法为:
将 scrollTop 和 scrollLeft封装为一个方法，名叫scroll()，返回值为 json。json里的键为 top 和 left。以后就直接调用json.top 和json.left就好。

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 5000px;
            width: 5000px;
        }
    </style>
</head>
<body>

<script>

    //需求：封装一个兼容的scroll().返回值是json，用scroll().top获取scrollTop，用scroll().left获取scrollLeft

    window.onscroll = function () {
//        var json = scroll();
//        json.top;
        console.log(scroll().top);
        console.log(scroll().left);
    }

    //函数封装（简单封装，实际工作使用）
    function scroll() {
        return { //此函数的返回值是json
            "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
            "left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
        }
    }
</script>
</body>
</html>

scrollTo和scrollBy

scollTo(x,y)滚到该绝对位置，scrollBy(x,y)滚到相对于现在的位置。

一个例子：
结合头部导航栏和回到顶部按钮。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
				<style type="text/css">
					#ad{
						width: 600px;
						height: 300px;
						background: skyblue;
						margin:  0 auto;
					}
					#nav{
						width: 100%;
						height: 100px;
						background: #333;
						color: #fff;
						text-align: center;
						line-height: 100px;
						
						
					}
					#huojian{
						width: 100px;
						height: 100px;
						background-image: url(img/火箭.png);
						background-size: 100% 100%;
						position: fixed;
						right: 100px;
						bottom:  100px;
					}
				</style>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="ad">
		  广告栏
		</div>
		<div id="nav">
		  导航栏
		 </div>
		 <div id="huojian">
		 			
		 		</div>
		 <div class="main">
			 h1{主要内容$}*200  //省略，此语句按tab键可以快速生成
		 </div>
	</body>
</html>

index.js

//头部导航栏的固定
window.onscroll=function(e){
	console.log(window.pageYOffset);
	var navDiv=document.querySelector("#nav")
	if(window.pageYOffset>300){
		navDiv.style.position="fixed";
		navDiv.style.top=0;
		navDiv.style.left=0;
	}else{
		navDiv.style.position="static";
		navDiv.style.top=0;
		navDiv.style.left=0;
	}
}
//回到顶部
window.onload = function(){
	var huojianDiv = document.querySelector("#huojian")
	huojianDiv.onclick = function(){
		var y = window.pageYOffset;
		var step = 100;
		var interId = setInterval(function(){
			step = step + 10;
			y = y - step
			if(y<=0){
				y = 0
				clearInterval(interId)
			}
			scrollTo(0,y)
		},10)
		
	}
}