H5：document-body和document-documentElement.md

发表于 分类于

概念

  • documentElement是整个节点树的根节点，即<html>标签
  • body是DOM树对象的body子节点，即<body>标签

DTD

  • 页面具有DTD，或者说指定了DOCTYPE时，使用document.documentElement
  • 页面没有DTD时，使用document.body

为了兼容两种情况，通常兼容如下：

1
2
3
4
const scrollTop = windon.PageYOffset || 
document.documentElement.scrollTop || 
document.body.scrollTop || 
0;

通常在设置scrollTop时，也需要做区分。

DOCTYPE唯一的作用是启用标准模式

问题和解决方法

问题：使用scrollTop来设置滑动到顶部或设置锚点后滑动到某个位置时，在有些安卓机或某些iOS版本不生效：

1
2
3
4
5
onScrollTop() {
  this.$nextTick(() => {
		document.documentElement.scrollTop = 0;
	});
}

解决方法：

1
2
3
4
5
6
onScrollTop() {
	this.$nextTick(() => {
			document.body.scrollTop = 0;
			document.documentElement.scrollTop = 0;
	});
},