js#offset和 scroll家族

最新推荐文章于 2021-04-08 19:53:27 发布

.Passion

最新推荐文章于 2021-04-08 19:53:27 发布

阅读量110

点赞数

本文链接：https://blog.csdn.net/qq_43923045/article/details/107569627

版权

前端专栏收录该内容

43 篇文章 0 订阅

订阅专栏

js中有一套方便的获取元素尺寸的办法，就是 offset家族，offset家族包括：

offsetWidth
offsetHight
offsetLeft
offsetTop
offsetParent


		
		<style>
			#p{
				width:300px;
				height: 300px;
				margin: 10px;
				padding: 10px;
				background: greenyellow;
			}
			 
			  
		</style> 
	<body>
		<div id='p'>
			
		</div>
		<script type="text/javascript">
			var p = document.querySelector('#p');
			
		</script>
		 
	</body>

在这里插入图片描述

offsetWidth = content + padding+border

offsetLeft: 父元素边框 + 父元素内边距+ 父元素外边距注意：
返回距离上级盒子（带有定位）左边的位置；如果父级都没有定位，则以浏览器为准

在这里插入图片描述 ### scrollTop的写法

网页被卷去的头部和左边部分， scrollTop 和 scrollLeft

scrollTop这个属性的写法要注意兼容性

window.pageYoffset||
document.body.scrollTop||document.documentElement.scrollTop

页面滚动的函数有 scrollTo 和 scrollBy两个

scrollTo 是绝对的， scrollBy是相对于自己的位置滚动，回到顶部的动画可以使用 scrollTo来实现

回到顶部的特效实现


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		 
		
		<style>
			body{
				height: 6000px;
			}
			 
			#p{
				height: 100px;
				background-color: black;
				width: 100vw;
			}
			#ad{
				height: 300px;
				text-align: center;
				border: 1px solid bisque;
				 
			}
			 #fly{
				 position: fixed;
				 right: 100px;
				 bottom: 100px;
				 width: 100px;
				 height: 60px;
			 }
			  
		</style> 
	<body>
		<div id='ad'>
			我是广告
		</div>
		<div id='p'>
			nav
		</div>
		<script type="text/javascript">
			var p = document.querySelector('#p');
			window.onscroll = function(e) {
				// console.log(123)
				if(window.pageYOffset>300) {
					p.style.position = 'fixed';
					p.style.top = 0;
					p.style.left = 0;
				}else{
					p.style.position = 'static';
					p.style.top = 0;
					p.style.left = 0;
				}
			}
		</script>
		
		<button id='fly'>
			fly
		</button>
		
		<script type="text/javascript">
			var fly = document.querySelector('#fly');
			var step = 10;
			fly.onclick=function() {
				let y = window.pageYOffset;
				var it = setInterval(function() {
					y = y-step;
					step +=2;
					if(y<=0) {
						y = 0;
						clearInterval(it)
					}
					scrollTo(0,y);
				});
			}
		</script>
		 
	</body>
</html>

.Passion

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js#offset和 scroll家族

js中有一套方便的获取元素尺寸的办法，就是 offset家族，offset家族包括：offsetWidthoffsetHightoffsetLeftoffsetTopoffsetParent <style> #p{ width:300px; height: 300px; margin: 10px; padding: 10px; background: greenyellow; } </s
复制链接

扫一扫

专栏目录