AnimateScroll
AnimateScroll

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

什么是DTD

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

目前HTML DTD共有三种类型：

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

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

<!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中：

<!doctype html>
<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

document.body与document.documentElement的区别

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

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

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来获取滚动条滚过的长度

获取网页相关属性

// 网页可见区域宽
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元素相关属性

// 元素的实际高度
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