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

資訊專欄INFORMATION COLUMN

瀏覽器窗口大小-網(wǎng)頁大小-元素位置

james / 1139人閱讀

摘要：部分摘錄自阮一峰老師博客瀏覽器窗口大小視窗一張網(wǎng)頁的全部面積，就是它的大小。是包括右邊滾動條的寬度的網(wǎng)頁大小如果網(wǎng)頁內(nèi)容能夠在瀏覽器窗口中全部顯示，不出現(xiàn)滾動條，那么網(wǎng)頁的和應該相等。

部分摘錄自阮一峰老師博客:
瀏覽器窗口大小(視窗) 
一張網(wǎng)頁的全部面積，就是它的大小。通常情況下，網(wǎng)頁的大小由內(nèi)容和CSS樣式表決定。
瀏覽器窗口的大小，則是指在瀏覽器窗口中看到的那部分網(wǎng)頁面積，又叫做viewport（視口）。

注意事項

必須在頁面加載完成后才能運行，否則document對象還沒生成，瀏覽器會報錯

clientWidth和clientHeight都是只讀屬性，不能對它們賦值。

window.innerWidth是包括右邊滾動條的寬度的

    const getViewport = () =>{
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }
網(wǎng)頁大小 
如果網(wǎng)頁內(nèi)容能夠在瀏覽器窗口中全部顯示，不出現(xiàn)滾動條，那么網(wǎng)頁的clientWidth和scrollWidth應該相等。但是實際上，不同瀏覽器有不同的處理，這兩個值未必相等。所以，我們需要取它們之中較大的那個值
    const getPageArea = () =>{
        return {
            width: Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth),
            height: Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)
         }
    }
網(wǎng)頁元素絕對位置 
指該元素的左上角相對于整張網(wǎng)頁左上角的坐標。這個絕對位置要通過計算才能得到。

不斷累加offsetParent的offsetTop和offsetLeft屬性

由于在表格和iframe中，offsetParent對象未必等于父容器，所以上面的函數(shù)對于表格和iframe中的元素不適用。

   function getElementLeft(element){
       var actualLeft = element.offsetLeft;
       var current = element.offsetParent;
   
       while (current !== null){
           actualLeft += current.offsetLeft;
           current = current.offsetParent;
       }
       return actualLeft;
   }
   function getElementTop(element){
       var actualTop = element.offsetTop;
       var current = element.offsetParent;
   
       while (current !== null){
           actualTop += current.offsetTop;
           current = current.offsetParent;
       }
       return actualTop;
   }

利用getBoundingClientRect方法

此方法其中包含了left、right、top、bottom四個屬性，分別對應了該元素的左上角和右下角相對于瀏覽器窗口（viewport）左上角的距離.(其實也就是網(wǎng)頁元素的相對位置)

   　var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
   
   　var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

網(wǎng)頁元素相對位置 
網(wǎng)頁元素的相對位置，指該元素左上角相對于瀏覽器窗口左上角的坐標。

有了絕對位置以后，獲得相對位置就很容易了，只要將絕對坐標減去頁面的滾動條滾動的距離就可以了 也就是減去document.documentElement.scrollLeft|scrollTop

    //快捷方法
    var X= this.getBoundingClientRect().left;
    
　　 var Y =this.getBoundingClientRect().top;
滾動位置

返回當前頁面的滾動位置。請使用pageXOffset和pageYOffset， 如果已定義，否則使用scrollLeft和scrollTop。你可以省略el來使用窗口的默認值。pageXOffset是scrollY的別名(event.pageX是鼠標活動事件的屬性)

    const getScrollPosition = (el = window) =>{
        return ({x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft, y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop});
    }
      
    // getScrollPosition() -> {x: 0, y: 200}
返回頁面頂部 
    const scrollToTop = () =>{
        const distance = document.documentElement.scrollTop
        if(distance > 0){
            window.requestAnimationFrame(scrollToTop)
            window.scrollTo(0, distance - distance/8)
        }
    }

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

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

相關(guān)文章

  • 網(wǎng)頁與瀏覽器窗口の真理

    摘要：參考資料首先，網(wǎng)頁大小與瀏覽器窗口大小從來都不是一回事這尼瑪最近才明白，坑所以，要知道以下常網(wǎng)頁的范圍我們在代碼里面設置的或者腳本，改變的樣式就是網(wǎng)頁范圍下的改變，也就是說，我們設置的大小是網(wǎng)頁的不是瀏覽器窗口的大小。 參考資料 首先，網(wǎng)頁大小與瀏覽器窗口大小從來都不是一回事?。?！這尼瑪最近才明白，坑~ 所以，要知道以下常: 網(wǎng)頁的范圍我們在代碼里面設置的CSS或者js腳本，改變的樣式...

    tinysun1234 評論0 收藏0

  • 瀏覽器的各種位置值獲取

    摘要：包括和屬性是可以賦值的，并且會立即自動滾動網(wǎng)頁到相應位置，因此可以利用它們改變網(wǎng)頁元素的相對位置。另外，方法也有類似作用，可以使網(wǎng)頁元素出現(xiàn)在瀏覽器窗口的左上角。網(wǎng)頁元素的位置那就是使用方法。就是透過瀏覽器看內(nèi)容的這個區(qū)域高度。 獲取網(wǎng)頁的大小 一張網(wǎng)頁的全部面積，就是它的大小，通常是由內(nèi)容和css樣式表決定的。瀏覽器窗口的大小，是在瀏覽器中看到的那部分網(wǎng)頁面積。又叫做viewport...

    lvzishen 評論0 收藏0

  • CSS布局模型

    摘要：在流動模型下，內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示。內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨占一行浮動模型塊狀元素這么霸道都是獨占一行，如果現(xiàn)在我們想讓兩個塊狀元素并排顯示，怎么辦呢不要著急，設置元素浮動就可以實現(xiàn)這一愿望。1、流動模型（Flow） 　　　　流動（Flow）是默認的網(wǎng)頁布局模式。也就是說網(wǎng)頁在默認狀態(tài)下的 HTML 網(wǎng)頁元素都是根據(jù)流動模型來分布網(wǎng)頁內(nèi)容的。 　　　　流...

    weakish 評論0 收藏0

  • Web網(wǎng)頁布局的主要方式

    摘要：改變屏幕分辨率可以切換不同的靜態(tài)局部頁面元素位置發(fā)生改變，但在每個靜態(tài)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。即創(chuàng)建多個流體式布局，分別對應一個屏幕分辨率范圍。 一、靜態(tài)布局（static layout） 　　即傳統(tǒng)Web設計，網(wǎng)頁上的所有元素的尺寸一律使用px作為單位。 1、布局特點 　　不管瀏覽器尺寸具體是多少，網(wǎng)頁布局始終按照最初寫代碼時的布局來顯示。常規(guī)的pc的網(wǎng)站都是靜態(tài)...

    blastz 評論0 收藏0

  • Web網(wǎng)頁布局的主要方式

    摘要：改變屏幕分辨率可以切換不同的靜態(tài)局部頁面元素位置發(fā)生改變，但在每個靜態(tài)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化。即創(chuàng)建多個流體式布局，分別對應一個屏幕分辨率范圍。 一、靜態(tài)布局（static layout） 　　即傳統(tǒng)Web設計，網(wǎng)頁上的所有元素的尺寸一律使用px作為單位。 1、布局特點 　　不管瀏覽器尺寸具體是多少，網(wǎng)頁布局始終按照最初寫代碼時的布局來顯示。常規(guī)的pc的網(wǎng)站都是靜態(tài)...

    shiina 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<