日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

DOM-5【兼容】滚动距离与高度、兼容模式、可视尺寸

發布時間：2023/12/10 35 豆豆
生活随笔 收集整理的這篇文章主要介紹了 DOM-5【兼容】滚动距离与高度、兼容模式、可视尺寸 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

查看滾動條的距離

方法版本
window.pageXOffset / pageYOffsetIE9/IE8及以下不支持(常規)
document.body.scrollLeft/scrollTopIE9/IE8及以下(部分支持，具體看模式)
document.documentElement.scrollLeft/scrollTopIE9/IE8及以下(部分支持，具體看模式)
window.scrollX / scrollY不常見

  • 滾動條距離：也看頁面真實移動了多少，不要看物理距離

兼容模式

瀏覽器的怪異模式和標準模式

  • 意味著需要按照W3C規范
  • CSS1Compat - W3C的兼容模式：標準模式
<!DOCTYPE html>
  • 若刪除<!DOCTYPE html> 則為BackCompat - 怪異模式

瀏覽器的可視區域

方法模式
window.innerWidth / innerHeightIE9/IE8及以下不支持(常規)【包括滾動條】
document.documentElement.clientWidth / clientHeightIE9/IE8及以下 - 標準 【不包括滾動條】
document.body.clientWidth / clientHeightIE9/IE8及以下 - 怪異 【包括滾動條】

  • outerWidth / outerHeight （包含了滾動條、側邊欄、控制臺等）

文檔尺寸

  • scrollWidth = window.innerWidth + window.pageXOffset 是真正html文檔的寬高
方法模式
document.documentElement.scrollWidth /scrollHeightIE9/IE8及以下 - 標準 【不包括滾動條】
document.body.scrollWidth / scrollHeightIE9/IE8及以下 - 怪異 【包括滾動條】

div.getBoundingClientRect()

  • 在IE中不返回寬高，可以用bottom-top計算
  • 不實時計算

offsetLeft

  • 只認父級的定位元素，沒有則向上找到可視區域的邊框
  • margin塌陷
  • 解決1，父元素加上邊距
  • 解決2，BFC 但是offsetLeft仍然是100

offsetParent

  • 找有定位的父級
  • 沒有則找到body

封裝方法

  • 小盒子（左上角）距離文檔左上角的坐標
  • document.body.offsetLeft 0

操作滾動條

  • 要滾動到window.scroll(x,y) / window.scrollTo(x,y)
  • 每一次滾動多少window.scrollBy(x,y) 應用：計時器+每次滾動（自動滾動）

總結

以上是生活随笔為你收集整理的DOM-5【兼容】滚动距离与高度、兼容模式、可视尺寸的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。