通过实验弄明白html中的大小、位置、滚动

最新推荐文章于 2022-08-28 19:52:15 发布

PlayAround

最新推荐文章于 2022-08-28 19:52:15 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： html 响应式 dhtml

本文链接：https://blog.csdn.net/wutbiao/article/details/39612029

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

随着互联网企业的持续推动，web设计效果越来越炫酷，用户交互越来优秀。好的界面，不光是炫耀开发实力，更主要的是改善了用户交互体验。目前比较流行的一些技术，响应式网页、延迟加载等，都要求动态的去判断改变组件的大小、获得滚动位置等。本文就从小实验去理解其中核心的三组属性。

html中有三组与大小、位置、滚动相关的属性：offset、client、scroll；首先，我把DHTML中三组属性定义罗列下来

DHTML中的定义

offsetTop:对象相对于版面或由offsetTop 属性指定的父坐标的计算顶端位置。

offsetLeft:对象相对于版面或由offsetParent 属性指定的父坐标的计算左侧位置。

offsetHeight:对象相对于版面或由父坐标offsetParent 属性指定的父坐标的高度。

offsetWidth:对象相对于版面或由父坐标offsetParent 属性指定的父坐标的宽度。

clientTop:offsetTop 属性和客户区域的实际顶端之间的距离。

clientLeft:offsetLeft 属性和客户区域的实际左边之间的距离。

clientHeight:对象的高度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。

clientWidth:对象的宽度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。

scrollHeight:获取对象的滚动高度。

scrollWidth:获取对象的滚动宽度。

实验代码

我们首选做出实验代码，其他的实验都要在这个上面来进行测试了

<!DOCTYPE html?>
<html>
	<head>
		<style type="text/css">
			*{
				margin:0px;
				padding:0px;
			}
			#logo{
				height:100px;
				border:1px dashed #333333;
			}
			#menu{
				width:200px;
				height:700px;
				border:1px dashed #333333;
				float:left;
			}
			#content{
				width:500px;
				height:500px;
				border:1px dashed #333333;
				float:left;
				overflow:scroll;
			}
		</style>
	</head>
	<body>
		<div id="logo"></div>
		<div id="menu">
		
		</div>
		<div id="content">
			
		</div>
	</body>
</html>

有了测试代码，我们就可以通过调试观察这些属性的差异了。

实验方法

浏览器打开测试页面，打开调试面板，只需测试id="content"的div。如下依次输入，观察，然后对比上面属性的定义。

var content=document.getElementById("content");
content.offsetTop;
content.offsetLeft;
content.offsetHeight;
content.offsetWidth;

--其他的两组测试代码并没有写出来，请自己完成

辅助应用-计算dom元素的坐标

其实，观察上面的结果，你会发现这些属性很难区分。下面我们使用几个改动来说明各个属性的区别。

首选，offsetTop、offsetLeft比较明显，通过这个属性，我们可以很容易的活动某个Element的绝对位置，这里要注意offsetParent属性。

//计算dom元素的坐标
function getpos(e){
    var t=e.offsetTop;   
    var l=e.offsetLeft;   
    var height=e.offsetHeight;   
    while(e=e.offsetParent){
         t+=e.offsetTop;   
         l+=e.offsetLeft;   
     }
    return {'left':l,'top':t};
}

通过上面可以看出client*组和offset*组的区别，但是scroll*组还是不明显。下面接着实验。

实验代码二

在content中加如下代码

<div id="cell">

</div>

在<style>标签内，添加如下代码

#cell{
	border:1px solid #333333;
	width:600px;
	height:700px;
}

现在，重复上面的实验方法，就能看出scroll组的区别了。

scrollHeight会变成content中内容的具体高度。

辅助应用-判断滚动条位置

scroll的应用就很广泛了，比如现在比较流行的延迟加载，就可以通过在body上添加滚动事件，判断滚动条是否到了文档的结尾，来进行延迟加载。

//判断滚动对象是否滚动到底部
function delayLoad(obj){
	var totalScroll=obj.scrollHeight-obj.clientHeight;
	if(totalScroll==obj.scrollTop){
		alert('load after page');
	}
}

整个实验完毕，理解应该很简单了，但是应用的思路还要靠自己去发现！