瀏覽器的各類位置值獲取

時間 2019-11-07

原文原文鏈接

獲取網頁的大小

一張網頁的所有面積，就是它的大小，一般是由內容和css樣式表決定的。
瀏覽器窗口的大小，是在瀏覽器中看到的那部分網頁面積。又叫作viewport（視口）。
若是網頁的內容可以在瀏覽器窗口中所有顯示（也就是不出現滾動條），那麼網頁的大小和瀏覽器窗口的大小是相等的。若是不能所有顯示，則滾動瀏覽器窗口，能夠顯示出網頁的各個部分。javascript

瀏覽器窗口可視區大小,瀏覽器窗口尺寸（不含工具欄和滾動條，只讀模式，不能賦值）

function getViewport(){
　　　　if (document.compatMode == "BackCompat"){//（兼容quirks模式）
　　　　    //document.compatMode用來判斷當前瀏覽器採用的渲染方式。
           //BackCompat：標準兼容模式關閉。CSS1Compat：標準兼容模式開啓。
　　　　　　return {
　　　　　　　　width: document.body.clientWidth,
　　　　　　　　height: document.body.clientHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.clientWidth,
　　　　　　　　height: document.documentElement.clientHeight
　　　　　　}
　　　　}
　　}

瀏覽器窗口內部高 window.innerHeight
                      內部寬 window.innerWidth

    IE 5 6 7 8      //通常返回的是正確值,documentElement表明根元素，通常指html             
     html文檔所在窗口的當前高度 document.documentElement.clientHeight
                          寬度 document.documentElement.clientWidth             
   或者Document對象的body屬性對應HTML文檔的Body標籤
                    document.body.clientHeight
                    document.body.clientWidth

網頁大小

function getPagearea(){
 　　　　if (document.compatMode == "BackCompat"){
 　　　　　　return {//判斷網頁內容恰好在瀏覽器中所有顯示，取最大值
 　　　　　　　　width: Math.max(document.body.scrollWidth,
 　　　　　　　　　　　　　　　　 document.body.clientWidth),
 　　　　　　　　height: Math.max(document.body.scrollHeight,
 　　　　　　　　　　　　　　　　  document.body.clientHeight)
 　　　　　　}
 　　　　} else {
 　　　　　　return {
 　　　　　　　　width: Math.max(document.documentElement.scrollWidth,
 　　　　　　　　　　　　　　　　 document.documentElement.clientWidth),
 　　　　　　　　height: Math.max(document.documentElement.scrollHeight,
 　　　　　　　　　　　　　　　　  document.documentElement.clientHeight)
 　　　　　　}
 　　　　} 　　    
    }

網頁實際內容的寬度和高度(包含滾動條在內的該元素的視覺面積，滾動條滾過的全部長度和寬)css

scrollHeight             
      scrollWidth           
 網頁內容寬高(包含滾動條等邊線，會隨着窗口的顯示大小改變)             
          offsetHeight
          offsetHeight=clientHeight+滾動條+邊框             
          offsetWidth

元素絕對位置

網頁元素的絕對位置，指該元素的左上角相對於整張網頁左上角的座標。這個絕對位置要經過計算才能獲得。
首先，每一個元素都有offsetTop和offsetLeft屬性，表示該元素的左上角與父容器（offsetParent對象）左上角的距離。因此，只須要將這兩個值進行累加，就能夠獲得該元素的絕對座標。html

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; 　　    
    }

元素的相對位置

網頁元素的相對位置，指該元素左上角相對於瀏覽器窗口左上角的座標。
有了絕對位置之後，得到相對位置就很容易了，只要將絕對座標減去頁面的滾動條滾動的距離就能夠了。滾動條滾動的垂直距離，是document對象的scrollTop屬性；滾動條滾動的水平距離是document對象的scrollLeft屬性。java

function getElementViewLeft(element){//offset包括border
 　　　　var actualLeft = element.offsetLeft;
 　　　　var current = element.offsetParent;
 　　　　while (current !== null){
 　　　　　　actualLeft += current.offsetLeft;
 　　　　　　current = current.offsetParent;
 　　　　}
 　　　　if (document.compatMode == "BackCompat"){
 　　　　　　var elementScrollLeft=document.body.scrollLeft;
 　　　　} else {
 　　　　　　var elementScrollLeft=document.documentElement.scrollLeft; 
 　　　　}
 　　　　return actualLeft-elementScrollLeft; 　　
    } 　　

    function getElementViewTop(element){
 　　　　var actualTop = element.offsetTop;
 　　　　var current = element.offsetParent;
 　　　　while (current !== null){
 　　　　　　actualTop += current. offsetTop;
 　　　　　　current = current.offsetParent;
 　　　　}
 　　　　 if (document.compatMode == "BackCompat"){
 　　　　　　var elementScrollTop=document.body.scrollTop;
 　　　　} else {
 　　　　　　var elementScrollTop=document.documentElement.scrollTop; 
 　　　　}
 　　　　return actualTop-elementScrollTop; 　　
    }

scrollTop和scrollLeft屬性是能夠賦值的，而且會當即自動滾動網頁到相應位置，所以能夠利用它們改變網頁元素的相對位置。另外，element.scrollIntoView()方法也有相似做用，可使網頁元素出如今瀏覽器窗口的左上角。jquery

網頁元素的位置

那就是使用getBoundingClientRect()方法。它返回一個對象，其中包含了left、right、top、bottom四個屬性，分別對應了該元素的左上角和右下角相對於瀏覽器窗口（viewport）左上角的距離。
因此，網頁元素的相對位置就是this=ele
　　瀏覽器

var X= this.getBoundingClientRect().left; 　　
 var Y=this.getBoundingClientRect().top;

再加上滾動距離，就能夠獲得絕對位置
　　ide

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

滾動條的位置

function getScrollTop() {
        if (window.pageYOffset) {
            scrollPos = window.pageYOffset;//
        }
        else if (document.compatMode && document.compatMode != 'BackCompat') {
            scrollPos = document.documentElement.scrollTop;
        }
        else if (document.body) {
            scrollPos = document.body.scrollTop;
        }
        return scrollPos;
    }

滾動距離和偏移量

scrollLeft 設置或者取位於給定對象左邊界與窗口中目前可見內容的最左端之間的距離
    scrollTop 設置或取位於對象最頂端與窗口中可見內容的最頂端之間的距離
    offsetLeft 獲取指定對象位於版面或由offsetParent屬性指定的父座標的計算左側位置
    offsetTop 得到指定對象相對於版面或由offsetParent屬性指定的父座標的計算頂端位置    

    offsetParent指的是佈局中設置position屬性 Relative Absolute Fixed的父容器，
                從最近的父節點開始，一層層向上找，直到html的body

屏幕的寬高工具

1. 整個屏幕的寬高: screen對象: 封裝當前屏幕的信息
      完整屏幕寬高: screen.width/height
      去掉任務欄後，可用的寬高: 
      screen.availWidth/availHeight
              : 如何判斷用戶如今使用設備的種類: 
       1. screen.width/height
       
2. 得到鼠標的座標位置: 
      得到鼠標相對於屏幕的位置: e.screenX/screenY

圖片描述
HTML精肯定位:scrollLeft,scrollWidth,clientWidth,offsetWidth 佈局

ele.scrollHeight: 獲取對象的滾動高度。
ele.scrollWidth:獲取對象的滾動寬度
ele.scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
ele.scrollTop:設置或獲取元素到文檔頂部的距離,滾動條拉動的距離 flex

//可用style.width,height,left,top來設置
offsetWidth:獲取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的寬度
offsetHeight:獲取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的高度
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置

event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平座標
event.offsetY 相對容器的垂直座標

document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
這裏是JavaScript中建造遷移轉變代碼的經常使用屬性
頁可見區域寬： document.body.clientWidth;
網頁可見區域高： document.body.clientHeight;
網頁可見區域寬： document.body.offsetWidth （包含邊線的寬）;
網頁可見區域高： document.body.offsetHeight （包含邊線的寬）;
網頁正文全文寬： document.body.scrollWidth;
網頁正文全文高： document.body.scrollHeight;
網頁被捲去的高： document.body.scrollTop;
網頁被捲去的左： document.body.scrollLeft;
網頁正文項目組上： window.screenTop;
網頁正文項目組左： window.screenLeft;
屏幕辨別率的高： window.screen.height;
屏幕辨別率的寬： window.screen.width;
屏幕可用工做區高度： window.screen.availHeight;

二、clientHeight
都認爲是內容可視區域的高度，也就是說頁面瀏覽器中能夠看到內容的這個區域的高度，通常是最後一個對象條如下到情況欄以上的這個區域，與頁面內容無關。

clientHeight 就是透過瀏覽器看內容的這個區域高度。
offsetHeight 和 scrollHeight 都是網頁內容高度，只不過當網頁內容高度< clientHeight 時，scrollHeight = clientHeight，而 offsetHeight 能夠< clientHeight。

offsetHeight = 可視區域 clientHeight + 滾動條 + 邊框。scrollHeight 則是網頁內容實際高度。

三、scrollLeft
scrollTop 是「卷」起來的高度值，示例：

<p style="width:100px;height:100px;background-color:＃FF0000;overflow:hidden;id="p">
     <span style="width:50px;height:300px;background-color:＃0000FF;" id="t">
         如果爲 p 設置了scrollTop，這些內容可能不會徹底顯示。
     </span>
 </p> 
 <script type="text/javascript"> 
    var p = document.getElementById（"p"）; 
    p.scrollTop = 10; 
 </script>

由於爲外層元素 p 設置了 scrollTop，因此內層元素會向上卷。

咱們已經知道 offsetHeight 是自身元素的寬度。
而 scrollHeight 是內部元素的絕對寬度，包含內部元素的隱蔽的項目組。
上述中 p 的 scrollHeight 爲 300(內部元素撐起來的高度)，而 p 的 offsetHeight 爲 100(自身的高度)。

1.offsetTop :
當前對象到其上級層頂部的間隔.
不可對其進行賦值.設置對象到頁面頂部的間隔請用style.top屬性.
2.offsetLeft :
當前對象到其上級層左邊的間隔.
不可對其進行賦值.設置對象到頁面左部的間隔請用style.left屬性.
3.offsetWidth :
當前對象的寬度.
與style.width屬性的差異在於:如對象的寬度設定值爲百分比寬度，則不管頁面變大仍是變小，style.width都返回此百分比，而offsetWidth則返回在不合頁面中對象的寬度值而不是百分比值
4.offsetHeight :
與style.height屬性的差異在於:如對象的寬度設定值爲百分比高度，則不管頁面變大仍是變小，style.height都返回此百分比，而offsetHeight則返回在不合頁面中對象的高度值而不是百分比值
5.offsetParent :
當前對象的上級層對象.
重視.如果對象是包含在一個DIV中時，此DIV不會被當作是此對象的上級層，（即對象的上級層會跳過DIV對象）上級層是Table時則不會有題目.
哄騙這個屬性，能夠得到當前對象在不合大小的頁面中的絕對地位．
6.scrollLeft :
對象的最左邊到對象在當前窗口顯示的侷限內的左邊的間隔．
即是在呈現了橫向滾動條的景象下，滾動條拉動的間隔．
7.scrollTop
對象的最頂部到對象在當前窗口顯示的侷限內的頂邊的間隔．
即是在呈現了縱向滾動條的景象下，滾動條拉動的間隔．

1、jQuery獲取的相關方法
jquery 獲取滾動條高度

獲取瀏覽器顯示區域的高度：

$(window).height();

獲取瀏覽器顯示區域的寬度：

$(window).width();

獲取頁面的文檔高度：
$(document).height();
獲取頁面的文檔寬度：$(document).width();

獲取滾動條到頂部的垂直高度：

$(document).scrollTop();

獲取滾動條到左邊的垂直寬度：

$(document).scrollLeft();

計算元素位置和偏移量：

$(id).offset();

offset方法是一個頗有用的方法，它返回包裝集中第一個元素的偏移信息。默認狀況下是相對body的偏移信息。結果包含 top和left兩個屬性。

offset(options, results)

options.relativeTo指定相對計算偏移位置的祖先元素。這個元素應該是relative或absolute定位。省略則相對body。

options.scroll是否把滾動條計算在內，默認TRUE
options.padding　　是否把padding計算在內，默認false
options.margin是否把margin計算在內，默認true

options.border是否把邊框計算在內，默認true

VUE一個滾動切換監聽的實例

<template>
        <div class="tab-scroll">
            <div class="tab-main">
                <ul>
                    <li v-for="(tabInfo,index) in config.tabList" class="offsetEle" :key="index">
                        <div>
                            <a><h3 class="tab-title">{{tabInfo.name}}</h3></a>
                            <!--組件html標籤均可以，調用tab-scroll的時候，在第幾個裏面放代碼的，要寫slot=幾-->
                            <slot :name="tabInfo.slotInd" v-if="tabInfo.slotInd">{{index}}</slot>
                            <!--只綁定組件-->
                            <div :is="tabInfo.content" ref="tabScrollItem" :config="tabInfo.config" v-else></div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="tab-nav">
                <ul>
                    <li :class="{focus:index ==config.selectIndex}" :key="index" v-for="(tabInfo,index) in config.tabList" @click="selectHandle(index,$event)">
                        <a href="#"><span>{{tabInfo.name}}</span></a>
                    </li>
                </ul>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            name:'tab-scroll',
            props:['config'],
            methods:{
                selectHandle (index,event) {
                    this.config.onOff=false;
                    this.config.selectIndex=index;
                    let offsetElement = event.target.parentNode.parentNode.parentNode.parentNode.parentNode.firstChild.firstChild.childNodes[index];
                    let eleTop = offsetElement.offsetTop;//當前元素距頂部距離
                    let scrTop = document.documentElement.scrollTop || document.body.scrollTop;//滾動條距頂部距離
                    // 平滑滾動，設置圖片自動位移速度爲總幀數20幀.600除以20，每幀位移30px,時長200ms，每10ms一跳，共20跳
                    let speed = eleTop / 20
                    if (eleTop > scrTop) {
                        smoothDown()
                    } else {
                        let newTotal = scrTop - eleTop
                        speed = newTotal / 20
                        smoothUp()
                    }
                    this.config.onOff=true;
                    function smoothDown () {
                        if (scrTop < eleTop) {
                            scrTop += speed
                            document.body.scrollTop = scrTop
                            document.documentElement.scrollTop = scrTop
                            setTimeout(smoothDown, 10)
                        } else {
                            document.body.scrollTop = eleTop
                            document.documentElement.scrollTop = eleTop
                        }
                    }
                    function smoothUp () {
                        if (scrTop > eleTop) {
                            scrTop -= speed
                            document.body.scrollTop = scrTop
                            document.documentElement.scrollTop = scrTop
                            setTimeout(smoothUp, 10)
                        } else {
                            document.body.scrollTop = eleTop
                            document.documentElement.scrollTop = eleTop
                        }
                    }
    
                },
                onScroll () {
                    if(this.config.onOff){
                        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop//滾動條距頂部距離
                        let offsetEle=document.querySelectorAll('.offsetEle')
                        for(let i=0;i<offsetEle.length;i++){
                            let offsetH=offsetEle[i].offsetTop+this.config.height;//元素距頂部的距離
                            let index=i;
                            if(offsetH>scrollTop){
                                this.config.selectIndex=index;
                                return false
                            }
                        }
                    }
                }
            },
            //掛載到el以後。
            mounted: function () {
                this.$nextTick(function () {
                    window.addEventListener('scroll', this.onScroll)
                })
            },
        }
    </script>
    
    <style lang="scss">
        .hide {
            display:none
        }
        .tab-scroll{
            position: relative;
            margin-top: 10px;
            .tab-main{
                width: 80%;
                >ul{
                    >li{
                        background-color: white;
                        box-shadow: 1px 1px 1px #e0e0e0;
                        &:not(:first-child){
                            margin-top: 20px;
                        }
                        &.focus{
                            .tab-title{
                                color: #00ac9d;
                                text-shadow: 1px 2px 5px #dacd97;
                            }
                        }
                    }
                }
            }
            .tab-title{
                color: #7d818c;
                padding-left: 10px;
                font-size: 14px;
                font-weight: 100;
                height: 35px;
                line-height: 35px;
                background-color: #fcfdff;
                transition: color 0.3s;
                backface-visibility:hidden;
                perspective:1000;
                border-bottom: solid 1px #f1f1f1;
            }
            .tab-nav{
                width:18%;
                user-select: none;
                padding: 10px 0 10px 50px;
                position: absolute;
                right: 0;
                top: 0;
                >ul{
                    position: fixed;
                    padding: 12px 0;
                    margin-left: 50px;
                    border-left: solid 2px #c8ccd2;
                    &:before,&:after{
                        left: -7px;
                        content: '';
                        height: 9px;
                        width: 9px;
                        position: absolute;
                        display: block;
                        border-radius: 10px;
                        border: solid 2px #c8ccd2;
                    }
                    &:before{
                        top: -12px;
                    }
                    &:after{
                        bottom: -12px;
                        height: 8px;
                        width: 8px;
                        border-radius: 0;
                        border-color: #c8ccd2;
                    }
                    >li{
                        height:45px;
                        display: flex;
                        cursor: pointer;
                        position: relative;
                        align-items: center;
    
                        &:before{
                            left: -7px;
                            content: '';
                            height: 9px;
                            width: 9px;
                            display: block;
                            position: relative;
                            border-radius: 10px;
                            border: solid 2px #c8ccd2;
                            background-color: #EDF0F5;
                        }
                        &:after{
                            top:0;
                            left: 20px;
                            height:100%;
                            color:#B8BFD9;
                            content: attr(describe);;
                            display: flex;
                            align-items: center;
                            position: absolute;
                            font-size: 14px;
                            transition:all 0.3s ease-in-out;
                            backface-visibility:hidden;
                            perspective:1000;
    
                        }
                        span{
                            height:30px;
                            line-height: 30px;
                            font-size:14px;
                            color: #B8BFD9;
                            display: block;
                            padding: 5px 15px;
                            position: relative;
                            border-radius: 5px;
                            transition:all 0.3s ease-in-out;
                            backface-visibility:hidden;
                            perspective:1000;
                            &:before{
                                top: 10px;
                                width: 0;
                                height: 0;
                                left: -14px;
                                content: '';
                                display: block;
                                border-width: 8px;
                                position: absolute;
                                border-style: dashed solid dashed dashed;
                                border-color: transparent;
                                transition:all 0.3s ease-in-out;
                                backface-visibility:hidden;
                                perspective:1000;
                            }
                        }
    
                        &:hover{
                            &:after{
                                left: 40px;
    
                            }
                            span{
                                margin-left:10px;
                                background-color: #DFE3EE;
                                &:before{
                                    border-color: transparent #DFE3EE transparent transparent;
                                }
    
                            }
                        }
    
                        &.focus{
                            &:before{
                                height: 8px;
                                width: 8px;
                                border-color:#567ed2;
                                background-color: #567ed2;
                                box-shadow: 0px 0px 5px 1px #1cb7a9;
                            }
                            &:after{
                                left: 40px;
                                color: #ffffff;
                            }
                            span{
                                margin-left:10px;
                                color:#fff;
                                background-color: #567ed2;
                                &:before{
                                    border-color: transparent #567ed2 transparent transparent;
                                }
                            }
                        }
    
                    }
                }
            }
        }
    
    
    </style>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。