AnimateScroll
AnimateScroll

在前端开发中,我们经常需要获取网页中滚动条滚过的长度。获取该值的方法一般是通过scrollTop属性,如document.body.scrollTop,但同时也有document.documentElement.scrollTop。这两者都是经常用来获取文档滚动条滚过距离的方式,它们又有什么区别呢?

什么是DTD

DTDDocument Type Definition,文档类型定义 )是一套为了进行程序间的数据交换而建立的关于标记符的语法规则,它使用一系列的合法元素来定义文档结构。 DTD告诉浏览器当前文档用的是什么标记语言,之后浏览器才能正确的根据W3C标准解析文档代码。

目前HTML DTD共有三种类型:

  • Strict DTD严格的文档类型定义,不能包含已过时的元素(或属性)和框架元素
  • Transitional DTD过渡的文档类型定义,可以包含已过时的元素(或属性)但不能包含框架元素
  • Frameset DTD框架集文档类型定义,可以包含已过时的元素(或属性)和框架元素

HTML文档就是通过<!DOCTYPE ...>定义的。下面是一个HTML4.0的过渡DTD HTML文档:

1
2
3
4
5
6
7
8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

或在HTML5中:

1
2
3
4
5
6
7
8
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

document.body与document.documentElement的区别

  • document代表的是整个文档(对于一个网页来说,包括整个网页结构),document.documentElement是整个文档节点树的根节点,在网页中即html标签元素
  • document.body是整个文档DOM节点树里的body节点,在网页中即body标签元素

我们常看见如下写法来获取页面滚动条滚动的长度,

1
2
3
var top = document.documentElement.scrollTop || document.body.scrollTop;
// 或者
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
  • 当使用了DTD来定义文档时,document.body.scrollTop的值为0,此时需要使用document.documentElement.scrollTop来获取滚动条滚过的长度
  • 当未使用DTD时,使用document.body.scrollTop来获取滚动条滚过的长度

获取网页相关属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 网页可见区域宽
var clientWidth = document.body.clientWidth;
// 网页可见区域高
var clientHeight = document.body.clientHeight;
// 网页可见区域宽(包括边线的宽)
var offsetWidth = document.body.offsetWidth;
// 网页可见区域高(包括边线的高)
var offsetHeight = document.body.offsetHeight;
// 网页正文全文宽
var scrollWidth = document.body.scrollWidth;
// 网页正文全文高
var scrollHeight = document.body.scrollHeight;
// 网页被卷去的高
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 网页被卷去的左
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;

获取DOM元素相关属性

1
2
3
4
5
6
7
8
// 元素的实际高度
var offsetHeight = document.getElementById("div").offsetHeight;
// 元素的实际宽度
var offsetWidth = document.getElementById("div").offsetWidth;
// 元素距离左边界的距离
var offsetLeft = document.getElementById("div").offsetLeft;
// 元素距离上边界的距离
var offsetTop = document.getElementById("div").offsetTop;

参考文章

  1. javascript中获取dom元素的高度和宽度 | 零度逍遥的博客
  2. 漫谈document.documentElement与document.body | 简书
  3. document.body 和 document.documentElement 的区别 | CSDN
  4. AnimateScroll