---
title: 37-scroll相关属性和缓动动画
publish: true
---
## scroll 相关属性
### window.onscroll() 方法
当我们用鼠标滚轮，滚动网页的时候，会触发 window.onscroll() 方法。效果如下：（注意看控制台的打印结果）
如果你需要做滚动监听，可以使用这个方法。
我们来看看和 scroll 相关的有哪些属性。
### 1、ScrollWidth 和 scrollHeight
`ScrollWidth` 和 `scrollHeight`：获取元素**整个滚动区域**的宽、高。包括 width 和 padding，不包括 border和margin。
**注意**：
`scrollHeight` 的特点是：如果内容超出了盒子，`scrollHeight`为内容的高（包括超出的内容）；如果不超出，`scrollHeight`为盒子本身的高度。`ScrollWidth`同理。
```html
静，能寒窗苦守；动，能点石成金。
静，能寒窗苦守；动，能点石成金。
静，能寒窗苦守；动，能点石成金。
静，能寒窗苦守；动，能点石成金。
静，能寒窗苦守；动，能点石成金。
静，能寒窗苦守；动，能点石成金。
```
打印结果：
### 2、scrollTop 和 scrollLeft
- `scrollLeft`：获取水平滚动条滚动的距离。
- `scrollTop`：获取垂直滚动条滚动的距离。
**实战经验**：
当某个元素满足`scrollHeight - scrollTop == clientHeight`时，说明垂直滚动条滚动到底了。
当某个元素满足`scrollWidth - scrollLeft == clientWidth`时，说明水平滚动条滚动到底了。
这个实战经验非常有用，可以用来判断用户是否已经将内容滑动到底了。比如说，有些场景下，希望用户能够看完“长长的活动规则”，才允许触发接下来的表单操作。
### scrollTop 的兼容性
如果要获取页面滚动的距离，scrollTop 这个属性的写法要注意兼容性，如下。
（1）如果文档没有 DTD 声明，写法为：
```javascript
document.body.scrollTop
```
在没有 DTD 声明的情况下，要求是这种写法，chrome浏览器才能认出来。
（2）如果文档有 DTD 声明，写法为：
```javascript
document.documentElement.scrollTop
```
在有 DTD 声明的情况下，要求是这种写法，IE6、7、8才能认出来。
综合上面这两个，就诞生了一种兼容性的写法：
```javascript
document.body.scrollTop || document.documentElement.scrollTop //方式一
document.body.scrollTop + document.documentElement.scrollTop //方式二
```
另外还有一种兼容性的写法：`window.pageYOffset` 和 `window.pageXOffset`。这种写法无视DTD的声明。这种写法支持的浏览器版本是：火狐/谷歌/ie9+。
综合上面的几种写法，为了兼容，不管有没有DTD，**最终版的兼容性写法：**
```javascript
window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
```
### 判断是否已经 DTD 声明
方法如下：
```javascript
document.compatMode === "CSS1Compat" // 已声明
document.compatMode === "BackCompat" // 未声明
```
### 将 scrollTop 和 scrollLeft 进行封装
这里，我们将 scrollTop 和 scrollLeft 封装为一个方法，名叫scroll()，返回值为 一个对象。以后就直接调用`scroll().top` 和 `scroll().left`就好。
代码实现：
```html
```
上方代码中，函数定义的那部分就是要封装的代码。
另外还有一种比较麻烦的封装方式：（仅供参考）
```javascript
function scroll() { // 开始封装自己的scrollTop
if(window.pageYOffset !== undefined) { // ie9+ 高版本浏览器
// 因为 window.pageYOffset 默认的是 0 所以这里需要判断
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 未声明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
```
## 获取 html 文档的方法
获取title、body、head、html标签的方法如下：
- `document.title` 文档标题；
- `document.head` 文档的头标签
- `document.body` 文档的body标签；
- `document.documentElement` （这个很重要）。
`document.documentElement`表示文档的html标签。也就是说，基本结构当中的 `html 标签`而是通过`document.documentElement`访问的，并不是通过 document.html 去访问的。
## scrollTop 举例：固定导航栏
完整版代码实现：
（1）index.html：
```html
```
上方代码中，有一个技巧：
```javascript
main.style.paddingTop = middle.offsetHeight + "px";
```
仔细看注释就好。
（2）tools.js：
```javascript
/**
* Created by smyhvae on 2018/02/03.
*/
function scroll() { // 开始封装自己的scrollTop
if (window.pageYOffset !== undefined) { // ie9+ 高版本浏览器
// 因为 window.pageYOffset 默认的是 0 所以这里需要判断
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if (document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 未声明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
```
实现效果：
~工程文件~：
- 2018-02-03-scrollTop固定导航栏.rar
- 下载链接暂无。
## 缓动动画
### 三个函数
缓慢动画里，我们要用到三个函数，这里先列出来：
- Math.ceil() 向上取整
- Math.floor() 向下取整
- Math.round(); 四舍五入
### 缓动动画的原理
缓动动画的原理就是：在移动的过程中，步长越来越小。
设置步长为：**目标位置和盒子当前位置的十分之一**。用公式表达，即：
```
盒子位置 = 盒子本身位置 + (目标位置 - 盒子本身位置)/ 10；
```
代码举例：
```html
```
效果：
### 缓慢动画的封装（解决四舍五入的问题）
我们发现一个问题，上图中的盒子最终并没有到达400px的位置，而是只到了396.04px就停住了：
原因是：JS在取整的运算时，进行了四舍五入。
我们把打印396.04px这个left值打印出来看看：
我么发现，通过`div.style.left`获取的值是精确的，通过`div.offsetLeft`获取的left值会进行四舍五入。
此时，我们就要用到取整的函数了。
通过对缓动动画进行封装，完整版的代码实现如下：
```html
```
实现效果：
## window.scrollTo()方法举例：返回到顶部小火箭
（1）index.html：
```html
我是最顶端.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
生命壹号，永不止步.....
```
（2）tools.js:
```javascript
/**
* Created by smyhvae on 2015/12/8.
*/
//函数：获取scrollTop和scrollLeft的值
function scroll() { // 开始封装自己的scrollTop
if (window.pageYOffset != null) { // ie9+ 高版本浏览器
// 因为 window.pageYOffset 默认的是 0 所以这里需要判断
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if (document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 未声明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
```
实现效果：
小火箭的图片资源：
## 我的公众号
想学习**更多技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
