生活随笔
收集整理的這篇文章主要介紹了
DOM-5【兼容】滚动距离与高度、兼容模式、可视尺寸
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
查看滾動條的距離
方法版本
| window.pageXOffset / pageYOffset | IE9/IE8及以下不支持(常規) |
| document.body.scrollLeft/scrollTop | IE9/IE8及以下(部分支持，具體看模式) |
| document.documentElement.scrollLeft/scrollTop | IE9/IE8及以下(部分支持，具體看模式) |
| window.scrollX / scrollY | 不常見 |
- 滾動條距離：也看頁面真實移動了多少，不要看物理距離
兼容模式
瀏覽器的怪異模式和標準模式
- 意味著需要按照W3C規范
- CSS1Compat - W3C的兼容模式：標準模式
<!DOCTYPE html
>
- 若刪除<!DOCTYPE html> 則為BackCompat - 怪異模式
瀏覽器的可視區域
方法模式
| window.innerWidth / innerHeight | IE9/IE8及以下不支持(常規)【包括滾動條】 |
| document.documentElement.clientWidth / clientHeight | IE9/IE8及以下 - 標準 【不包括滾動條】 |
| document.body.clientWidth / clientHeight | IE9/IE8及以下 - 怪異 【包括滾動條】 |
- outerWidth / outerHeight （包含了滾動條、側邊欄、控制臺等）
文檔尺寸
- scrollWidth = window.innerWidth + window.pageXOffset 是真正html文檔的寬高
方法模式
| document.documentElement.scrollWidth /scrollHeight | IE9/IE8及以下 - 標準 【不包括滾動條】 |
| document.body.scrollWidth / scrollHeight | IE9/IE8及以下 - 怪異 【包括滾動條】 |
div.getBoundingClientRect()
- 在IE中不返回寬高，可以用bottom-top計算
- 不實時計算
offsetLeft
- 只認父級的定位元素，沒有則向上找到可視區域的邊框
- margin塌陷
- 解決1，父元素加上邊距
- 解決2，BFC 但是offsetLeft仍然是100
offsetParent
封裝方法
- 小盒子（左上角）距離文檔左上角的坐標
- document.body.offsetLeft 0
操作滾動條
- 要滾動到window.scroll(x,y) / window.scrollTo(x,y)
- 每一次滾動多少window.scrollBy(x,y) 應用：計時器+每次滾動（自動滾動）
總結
以上是生活随笔為你收集整理的DOM-5【兼容】滚动距离与高度、兼容模式、可视尺寸的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
