6、scroll家族

最新推荐文章于 2023-01-08 15:02:07 发布

瓜娃子qaq

最新推荐文章于 2023-01-08 15:02:07 发布

阅读量188

点赞数

分类专栏： JS 文章标签： scroll

本文链接：https://blog.csdn.net/weixin_45699925/article/details/103006072

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、scroll家族

1、兼容性问题正常使用pageOffset获取滚动位置

//兼容性问题 scrollTop  scrollLeft   获取位置
		function getScroll() {
			var scroll = {
				x: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
				y: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
			};
			return scroll;
		}

2、设置滚动的位置

scrollTo(0,1000)设置滚动的位置  绝对的位置  从顶部到滚到设置位置
scrollBy(0,100) 设置滚动的位置  相对位置  从当前位置滚到设置位置

3、案例1

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>瓜娃子</title>
	<style>
		#d1 {
			width: 200px;
			height: 200px;
			color: skyblue;
			border: 40px solid purple;
			padding: 20px;
			margin: 100px;
		}
		
		body {
			border: 20px solid pink;
			padding: 40px;
			position: relative;
		}
	</style>
</head>
<body>
	<div id="d1">helloWorld</div>
	<script>
		var d1 = document.querySelector('#d1');
		console.log([d1]);
		
		//兼容性问题 scrollTop  scrollLeft   获取位置
		function getScroll() {
			var scroll = {
				x: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
				y: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
			};
			return scroll;
		}
		
		//scrollTo(0,1000)设置滚动的位置  绝对的位置  从顶部到滚到设置位置
		//scrollBy(0,100) 设置滚动的位置  相对位置  从当前位置滚到设置位置
	
	
	</script>
</body>
</html>

4、案例2

1、html代码

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>瓜娃子</title>
	<style>
		#ad {
			width: 600px;
			height: 300px;
			background-color: skyblue;
			margin: 0 auto;
		}
		
		#nav {
			width: 100%;
			height: 100px;
			background-color: #333;
			text-align: center;
			color: #fff;
			line-height: 100px;
		}
		
		#rocket {
			width: 100px;
			height: 100px;
			background-image: url('images/火箭.png');
			background-size: 100% auto;
			position: fixed;
			right: 100px;
			bottom: 100px;
		}
	</style>
	<script src="js/headNav.js"></script>
	<!--使用onload加载-->
</head>
<body>
	<div id="ad">广告栏</div>
	<div id="nav">导航栏</div>
	<div id="rocket"></div>
	<div class="main">
		<h1>这些都是内容1</h1>
		<h1>这些都是内容2</h1>
		<h1>这些都是内容3</h1>
		<h1>这些都是内容4</h1>
		<h1>这些都是内容5</h1>
		<h1>这些都是内容6</h1>
		<h1>这些都是内容7</h1>
		<h1>这些都是内容8</h1>
		<h1>这些都是内容9</h1>
		<h1>这些都是内容10</h1>
		<h1>这些都是内容11</h1>
		<h1>这些都是内容12</h1>
		<h1>这些都是内容13</h1>
		<h1>这些都是内容14</h1>
		<h1>这些都是内容15</h1>
		<h1>这些都是内容16</h1>
		<h1>这些都是内容17</h1>
		<h1>这些都是内容18</h1>
		<h1>这些都是内容19</h1>
		<h1>这些都是内容20</h1>
		<h1>这些都是内容21</h1>
		<h1>这些都是内容22</h1>
		<h1>这些都是内容23</h1>
		<h1>这些都是内容24</h1>
		<h1>这些都是内容25</h1>
		<h1>这些都是内容26</h1>
		<h1>这些都是内容27</h1>
		<h1>这些都是内容28</h1>
		<h1>这些都是内容29</h1>
		<h1>这些都是内容30</h1>
		<h1>这些都是内容31</h1>
		<h1>这些都是内容32</h1>
		<h1>这些都是内容33</h1>
		<h1>这些都是内容34</h1>
		<h1>这些都是内容35</h1>
		<h1>这些都是内容36</h1>
		<h1>这些都是内容37</h1>
		<h1>这些都是内容38</h1>
		<h1>这些都是内容39</h1>
		<h1>这些都是内容40</h1>
		<h1>这些都是内容41</h1>
		<h1>这些都是内容42</h1>
		<h1>这些都是内容43</h1>
		<h1>这些都是内容44</h1>
		<h1>这些都是内容45</h1>
		<h1>这些都是内容46</h1>
		<h1>这些都是内容47</h1>
		<h1>这些都是内容48</h1>
		<h1>这些都是内容49</h1>
	</div>
</body>
</html>

2、js代码

window.onscroll = function (e) {
	// console.log(e);
	// console.log(window);
	// console.log(window.scrollY);
	// console.log(window.pageYOffset);
	var navDiv = document.querySelector('#nav');
	if (window.pageYOffset > 300) {
		navDiv.style.position = 'fixed';
		navDiv.style.left = '0';
		navDiv.style.top = '0';
	} else {
		navDiv.style.position = 'static';
		navDiv.style.left = '0';
		navDiv.style.top = '0';
	}
};

window.onload = function () {
	var rocket = document.querySelector('#rocket');
	rocket.onclick = function () {
		var y = window.pageYOffset;
		var styp = 100;
		var timer = setInterval(function () {
			styp++;
			y = y - styp;
			if (y <= 0) {
				y = 0;
				clearInterval(timer);
			}
			scrollTo(0, y);
		}, 10);
	};
};

瓜娃子qaq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6、scroll家族

1、scroll家族1、兼容性问题正常使用pageOffset获取滚动位置//兼容性问题 scrollTop scrollLeft 获取位置 function getScroll() { var scroll = { x: window.pageXOffset || document.body.scrollLeft || document.documentElemen...
复制链接

扫一扫