一、水平滚动条 和 垂直滚动条
1.1 核心技术点
1）求滚动条的长度？ 2）拖动滚动条，求内容要走多少？
滚动条的长度取决于滚动内容（滚动内容越长，滚动条越短）；
内容滚动的距离和滚动条走的距离是成倍数关系。
1.2 换算公式
-
获取滚动条的长度：
**滚动条的长度 / 盒子的长度 = 盒子的长度 / 内容的长度 **
滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度
-
拖动滚动条，求内容走的长度：
- **内容走的距离 / 滚动条走的距离 =（内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度) **
- 内容走的距离 = （内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度) * 滚动条走的距离
二、内置对象document
Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问
-
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问:
** document.head（获取头部） **
** document.body（获取身体） **
** document.title （获取标题） **
** document.documentElement（获取整个html)**
-
Document.compatMode:
** BackCompat：标准兼容模式关闭**
- 浏览器宽度:document.body.clientWidth
** CSS1Compat：标准兼容模式开启 **
- 浏览器宽度:document.documentElement.clientWidth
-
BackCompat 对应 quirks mode(怪异模式) , CSS1Compat 对应 strict mode (严格模式) ：
早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式)，但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式) 。
三、scroll家族
3.1 基本概念
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
在实际开发中使用比较多的就是scrollTop，如下图：
3.2 处理scroll家族浏览器适配问题
- **ie9+ 和 最新浏览器 **
window.pageXOffset; （scrollLeft）
window.pageYOffset; （scrollTop）
-
**Firefox浏览器 和 其他浏览器 **
document.documentElement.scrollTop;
-
**Chrome浏览器 和 没有声明 DTD <DOCTYPE > **
document.body.scrollTop;
兼容写法
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
3.3 scrollTo(x,y)
把内容滚动到指定的坐标
-
格式：scrollTo(xpos,ypos)
xpos 必需；要在窗口文档显示区左上角显示的文档的 x 坐标；
ypos 必需；要在窗口文档显示区左上角显示的文档的 y 坐标 。
- 网页大部分都没有水平滚动条，所以，这个x 不太常用。
四、什么是Json?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。相比于XML，json易于人阅读和编写，同时也易于机器解析和生成，目前数据传递基本上都使用json。
JSON有两种结构：对象 和 数组，两种结构相互组合从而形成各种复杂的数据结构。
- 数据在键值对中
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
[图片上传中...(248911-106.jpg-ea0b27-1511533944214-0)]
