一榨惰、水平滾動條 和 垂直滾動條（案例練習(xí)總結(jié)）
1.1 核心技術(shù)點
1）求滾動條的長度？ 2）拖動滾動條咧栗，求內(nèi)容要走多少臊恋？
滾動條的長度取決于滾動內(nèi)容（滾動內(nèi)容越長衣洁，滾動條越短）；
內(nèi)容滾動的距離和滾動條走的距離是成倍數(shù)關(guān)系抖仅。
1.2 換算公式
獲取滾動條的長度：
滾動條的長度 \/ 盒子的長度 = 盒子的長度 \/ 內(nèi)容的長度
滾動條長度 = ( 盒子的寬度 \/ 內(nèi)容的寬度) * 盒子的寬度
拖動滾動條坊夫，求內(nèi)容走的長度：
內(nèi)容走的距離 \/ 滾動條走的距離 =（內(nèi)容的長度 - 盒子的長度） \/ (盒子長度 - 滾動條的長度)
內(nèi)容走的距離 = （內(nèi)容的長度 - 盒子的長度） \/ (盒子長度 - 滾動條的長度) * 滾動條走的距離
課后作業(yè)：仿寫垂直滾動效果
二毙替、內(nèi)置對象document
Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進(jìn)行訪問
Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進(jìn)行訪問:
document.head（獲取頭部）
document.body（獲取身體）
document.title （獲取標(biāo)題）
document.documentElement（獲取整個html)
Document.compatMode:
BackCompat：標(biāo)準(zhǔn)兼容模式關(guān)閉
瀏覽器寬度:document.body.clientWidth
CSS1Compat：標(biāo)準(zhǔn)兼容模式開啟
瀏覽器寬度:document.documentElement.clientWidth
BackCompat 對應(yīng) quirks mode(怪異模式) , CSS1Compat 對應(yīng) strict mode (嚴(yán)格模式) ：
早期的瀏覽器Netscape 4和Explorer 4對css進(jìn)行解析時践樱，并未遵守W3C標(biāo)準(zhǔn)，這時的解析方式就被我們稱之為quirks mode(怪異模式)凸丸，但隨著W3C的標(biāo)準(zhǔn)越來越重要拷邢，眾多的瀏覽器開始依照W3C標(biāo)準(zhǔn)解析CSS，仿照W3C標(biāo)準(zhǔn)解析CSS的模式我們叫做strict mode(嚴(yán)格模式) 屎慢。
三瞭稼、scroll家族
3.1 基本概念
網(wǎng)頁正文全文寬： document.body.scrollWidth;
網(wǎng)頁正文全文高： document.body.scrollHeight;
網(wǎng)頁被卷去的高： document.body.scrollTop;
網(wǎng)頁被卷去的左： document.body.scrollLeft;
在實際開發(fā)中使用比較多的就是scrollTop，如下圖：
3.2 處理scroll家族瀏覽器適配問題
ie9+ 和 最新瀏覽器
window.pageXOffset; （scrollLeft）
window.pageYOffset; （scrollTop）
Firefox瀏覽器 和 其他瀏覽器
document.documentElement.scrollTop;
Chrome瀏覽器 和 沒有聲明 DTD
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)
把內(nèi)容滾動到指定的坐標(biāo)
格式：scrollTo(xpos,ypos)
xpos 必需腻惠；要在窗口文檔顯示區(qū)左上角顯示的文檔的 x 坐標(biāo)环肘；
ypos 必需；要在窗口文檔顯示區(qū)左上角顯示的文檔的 y 坐標(biāo) 集灌。
網(wǎng)頁大部分都沒有水平滾動條悔雹，所以，這個x 不太常用欣喧。
四腌零、什么是Json?
JSON(JavaScriptObject Notation) 是一種輕量級的數(shù)據(jù)交換格式。它基于ECMAScript的一個子集唆阿。相比于XML益涧，json易于人閱讀和編寫，同時也易于機器解析和生成驯鳖，目前數(shù)據(jù)傳遞基本上都使用json闲询。
JSON有兩種結(jié)構(gòu)：對象 和 數(shù)組，兩種結(jié)構(gòu)相互組合從而形成各種復(fù)雜的數(shù)據(jù)結(jié)構(gòu)浅辙。
數(shù)據(jù)在鍵值對中
數(shù)據(jù)由逗號分隔
花括號保存對象
方括號保存數(shù)組
{ id: '100000', text: '廊坊銀行總行', children: [
{
id: '110000',
text: '廊坊分行',
children: \[
{
id: '113000',
text: '廊坊銀行開發(fā)區(qū)支行',
leaf: true
},
{
id: '112000',
text: '廊坊銀行解放道支行',
children: \[
{
id: '112200',
text: '廊坊銀行三大街支行',
leaf: true
},
{
id: '112100',
text: '廊坊銀行廣陽道支行',
leaf: true
}
\]
},
{
id: '111000',
text: '廊坊銀行金光道支行',
leaf: true
}
\]
}
] }
http:\/\/c.m.163.com\/nc\/article\/BVEGO8UT05299OU6\/full.html
