JavaScript DOM 8 - 文檔坐標和視口坐標

Stardustsky 發布于2019-08-20 17:42 / 685人閱讀

摘要：在用瀏覽器打開一個網頁的這個情況下，視口坐標就是指瀏覽器窗口的坐標，而文檔坐標就是我們網頁的坐標。這兩個坐標系的換算要通過滾動條的位置來換算。獲取視口的尺寸和以上規則一樣，只是相應的屬性是

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

網頁上的某個元素，同時處于這兩個坐標系中，當頁面沒有任何滾的時候，它在兩個坐標系中的坐標是一樣的，但是當頁面滾動了之后，就會不一樣了。這兩個坐標系的換算要通過滾動條的位置來換算。

滾動條一開始的坐標也是(0, 0)，所以滾動條的坐標也就是滾動條的偏移量，同時也反應了頁面上的一個元素在文檔坐標系中的坐標和在視口坐標系中的坐標的差值：

文檔坐標系坐標 ＝ 視口坐標系坐標 ＋ 滾動條的偏移量

獲取滾動條的坐標(偏移量)要考略IE8及之前的版本，同時要考略瀏覽器是否處在怪異模式下面，總得來說有三種辦法獲得滾動條坐標：

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

所以如果我們寫一個總能獲取到滾動條得函數，那就是：

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可以獲取當前瀏覽器得模式：

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

獲取視口的尺寸和以上規則一樣，只是相應的屬性是：

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

云服務器 GPU云服務器使用Javascript和DOM 蘋果坐標系坐標轉換 php 橫坐標縱坐標屏幕坐標

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83790.html

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

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

habren 2019-08-23 18:19 評論0 收藏0
HTML5如何使用SVG

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

n7then 2019-08-23 14:39 評論0 收藏0
Javascript之事件(二)

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

desdik 2019-08-21 10:47 評論0 收藏0
JavaScript 中那些關于坐標和距離的屬性與方法

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

jsummer 2019-08-26 13:57 評論0 收藏0