前端笔记93——文档、可视区宽高以及滚动距离计算

原创于 2019-06-22 11:19:28 发布 · 483 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #JavaScript #文档宽高 #可视区宽高 #滚动距离计算

前端专栏收录该内容

93 篇文章

订阅专栏

在前端开发中，常需获取文档、可视区宽高以及滚动距离。本文指出实现该功能较为简单，并将分享相关的Js代码实例。

前言

在实际的前端开发当中，我们经常获取文档、可视区宽高以及滚动距离。实现起来是很简单的，下面分享相关的Demo。

Js代码实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body style="width:3000px;height: 2000px; background-color: orange;">
		<script type="text/javascript">
			// 获取和文档相关
			// 注意:document是一个对象,对象没有宽高,必须要获取到html元素才有宽高
			// document.documentElement 获取到的是整个html网页
			console.log(document.documentElement)
			//1获取文档可视区的宽高
			console.log(document.documentElement.clientWidth)
			console.log(document.documentElement.clientHeight)
			
			// 2.获取页面的宽高
			console.log(document.documentElement.scrollHeight)
			console.log(document.documentElement.scrollWidth)
			
			// 3.如何获取滚动距离
			console.log(document.documentElement.scrollTop)
			console.log(document.documentElement.scrollLeft)
		</script>
	</body>
</html>