成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript DOM 8 - 文檔坐標(biāo)和視口坐標(biāo)

Stardustsky / 689人閱讀

摘要：在用瀏覽器打開一個(gè)網(wǎng)頁(yè)的這個(gè)情況下，視口坐標(biāo)就是指瀏覽器窗口的坐標(biāo)，而文檔坐標(biāo)就是我們網(wǎng)頁(yè)的坐標(biāo)。這兩個(gè)坐標(biāo)系的換算要通過(guò)滾動(dòng)條的位置來(lái)?yè)Q算。獲取視口的尺寸和以上規(guī)則一樣，只是相應(yīng)的屬性是

在用瀏覽器打開一個(gè)網(wǎng)頁(yè)的這個(gè)情況下，視口坐標(biāo)就是指瀏覽器窗口的坐標(biāo)，而文檔坐標(biāo)就是我們網(wǎng)頁(yè)的坐標(biāo)。在頁(yè)面沒有滾動(dòng)的情況下，這兩個(gè)坐標(biāo)的原點(diǎn)是重合的，也就是二者的左上角（0， 0）重合，然后這兩個(gè)坐標(biāo)系的X軸和Y軸分別朝右和朝下延伸。

網(wǎng)頁(yè)上的某個(gè)元素，同時(shí)處于這兩個(gè)坐標(biāo)系中，當(dāng)頁(yè)面沒有任何滾的時(shí)候，它在兩個(gè)坐標(biāo)系中的坐標(biāo)是一樣的，但是當(dāng)頁(yè)面滾動(dòng)了之后，就會(huì)不一樣了。這兩個(gè)坐標(biāo)系的換算要通過(guò)滾動(dòng)條的位置來(lái)?yè)Q算。

滾動(dòng)條一開始的坐標(biāo)也是(0, 0)，所以滾動(dòng)條的坐標(biāo)也就是滾動(dòng)條的偏移量，同時(shí)也反應(yīng)了頁(yè)面上的一個(gè)元素在文檔坐標(biāo)系中的坐標(biāo)和在視口坐標(biāo)系中的坐標(biāo)的差值：

文檔坐標(biāo)系坐標(biāo) ＝ 視口坐標(biāo)系坐標(biāo) ＋ 滾動(dòng)條的偏移量

獲取滾動(dòng)條的坐標(biāo)(偏移量)要考略IE8及之前的版本，同時(shí)要考略瀏覽器是否處在怪異模式下面，總得來(lái)說(shuō)有三種辦法獲得滾動(dòng)條坐標(biāo)：

1: pageXOffset, pageYOffset -> 所有瀏覽器及 >= IE9
2: document.documentElement.scrollLeft, document.documentElement.scrollTop -> 所有標(biāo)準(zhǔn)模式下面的瀏覽器
3: document.body.scrollLeft, document.body.scrollTop -> 所有怪異模式下面的瀏覽器

所以如果我們寫一個(gè)總能獲取到滾動(dòng)條得函數(shù)，那就是：

function getScrollOffsets(w){
    var w = w || window;
    if(w.pageXOffset !== null){
        return {x: pageXOffset, y: pageYOffset}
    }
    var d = w.document;
    if(document.compatMode == "CSS1Compat"){
        return {x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop}
    }
    return {x: d.body.scrollLeft, y: d.body.scrollTop}
}

document.compatMode可以獲取當(dāng)前瀏覽器得模式：

BackCompat： quirks mode（怪異模式）
CSS1Compat： none-quirks mode（非怪異模式，也叫做standards或者limited-quirks或者 almost standards）。

獲取視口的尺寸和以上規(guī)則一樣，只是相應(yīng)的屬性是：

window.innerWidth | window.innerHeight
document.documentElement.clientWidth | document.documentElement.clientHeight
document.body.clientWidth | document.body.clientHeight

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83790.html

相關(guān)文章

  • JavaScript 編程精解 中文第三版 十七、在畫布上繪圖

    摘要：貝塞爾曲線方法可以繪制一種類似的曲線。不同的是貝塞爾曲線需要兩個(gè)控制點(diǎn)而不是一個(gè)，線段的每一個(gè)端點(diǎn)都需要一個(gè)控制點(diǎn)。下面是描述貝塞爾曲線的簡(jiǎn)單示例。 來(lái)源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項(xiàng)目原文：Drawing on Canvas 譯者：飛龍 協(xié)議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯 部分參考了《JavaScript 編程精解（第 2...

    habren 評(píng)論0 收藏0

  • HTML5如何使用SVG

    摘要：標(biāo)簽標(biāo)簽用于將多個(gè)形狀組成一個(gè)組，方便復(fù)用。表示的寬度和長(zhǎng)度是實(shí)際的像素值。標(biāo)簽標(biāo)簽對(duì)的屬性不起作用，如果需要變形，就要使用標(biāo)簽。注意，如果使用標(biāo)簽插入文件，就無(wú)法獲取。 代碼優(yōu)化永遠(yuǎn)是程序員亙古不變的需求，而合理的利用SVG圖片來(lái)代替部分PNG/JPG等格式的圖片則是前端優(yōu)化重要的一環(huán)，既然是優(yōu)化，那我們先來(lái)看看SVG圖片都有哪些優(yōu)勢(shì)： SVG 可被非常多的工具讀取和修改（比如記事本...

    n7then 評(píng)論0 收藏0

  • Javascript之事件(二)

    摘要：和支持這個(gè)事件。特定于事件目標(biāo)的對(duì)象的數(shù)組。這個(gè)事件的目的是提供與文檔或元素的加載狀態(tài)有關(guān)的信息和有一個(gè)特性，名叫往返緩存，或，這個(gè)事件在頁(yè)面顯示時(shí)觸發(fā)該事件會(huì)在瀏覽器卸載頁(yè)面的時(shí)候觸發(fā)事件的對(duì)象還包含一個(gè)名為的布爾值屬性。 showImg(http://static.segmentfault.com/build/global/img/emojis/ribbon.png);事件類型 ...

    desdik 評(píng)論0 收藏0

  • JavaScript 中那些關(guān)于坐標(biāo)和距離的屬性與方法

    摘要：摘自阮一峰教程位置大小屬性只讀屬性返回瀏覽器窗口左上角相對(duì)于當(dāng)前屏幕左上角的水平距離和垂直距離單位像素。摘自阮一峰教程相關(guān)方法返回一個(gè)對(duì)象，提供當(dāng)前元素的大小位置等信息。摘自阮一峰教程四鼠標(biāo)事件接口通過(guò)添加的事件所產(chǎn)生的事件對(duì)象也是實(shí)例。 一 前言 在前端開發(fā)中總會(huì)遇到各種各樣需要使用或計(jì)算坐標(biāo)和距離的情況，但是這些屬性和方法眾多，全部熟練地記下來(lái)并非是一件易事，大多只能現(xiàn)查，耗費(fèi)不少...

    jsummer 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<