關於scroll,client,innear,avail,offset等的理解

時間 2019-11-21

標籤關於 scroll client innear avail offset 理解简体版

原文原文鏈接

在寫實例理解scrollWidth，clientWidth，innearWidth，availWidth及offsetWidth等的時候，意外的又發現了margin值合併的問題，在這裏同時記錄下

1.偏移量的區別

html文件（本身寫的示例）

<div id="root">
    <div class="box">
        <div class="content"></div>
    </div>
</div>

css樣式

<style>
    body, html{
        padding: 0;
        margin: 0;
    }
    #root{
        /*position: relative;*/
        margin: 0 auto;
        width: 1200px;
        /*border: 1px solid black;*/
    }
    .box{
        overflow: scroll;
        margin: 5px;
        padding: 20px;
        width: 500px;
        height: 600px;
        border: 2px solid blueviolet;
        /*box-sizing: border-box;*/
        background: linear-gradient(to right, rgb(85, 181, 255), rgb(207, 224, 232));
    }
    .content{
        width: 530px;
        height: 600px;
    }
</style>

較多見的屬性

clientWidth: 指可見區的寬度（網頁，或者元素）
clientHeight: 指可見區的高度（網頁，或者元素）
offsetWidth: 指元素的寬度（網頁，或者元素）
offsetHeight: 指元素的高度（網頁，或者元素）
scrollTop: 滾動條的滾動距離
scrollLeft: 滾動條的滾動距離
availWidth: 屏幕可用區寬度
availHeight: 屏幕可用區高度

script

<script>
    (function() {
        let elementName = document.getElementsByClassName('box')[0];
        let elementContent = document.getElementsByClassName('content')[0];

        /* offsetWidth爲元素的寬度，返回數值,只讀屬性(能夠讀取css文件裏的值，也能夠讀取內聯樣式裏的值)
         * 當box-sizing爲content-box時，offsetWidth=(padding-left)+(padding-right)+(border-left)+(border-right)+width
         * 當box-sizing爲border-box時，offsetWidth=width
         * 當元素自己未設置寬時，讀取的是父元素的寬度減去元素自己設置的margin值
         * */
        let elementWidth = elementName.offsetWidth;
        console.log(elementWidth);

        /* clientWidth爲元素的寬度，返回數值，只讀屬性(能夠讀取css文件裏的值，也能夠讀取內聯樣式裏的值)
         * 在元素未溢出時：
         * 當box-sizing爲content-box時，clientWidth=(padding-left)+(padding-right)+width
         * 當box-sizing爲border-box時，clientWidth=width-(border-left)-(border-right)
         * 當元素自己未設置寬時，讀取的是父元素的寬度減去元素自己設置的border值
         * 元素溢出時(子元素寬度大於父元素寬度)：
         * clientWidth爲除了邊框及X、Y向滾動條的寬度(可視區)
         * */
        let elemClientWidth = elementName.clientWidth;
        console.log(elemClientWidth);

        /* style.width爲元素的寬度，返回字符串(包含單位)，可讀寫
         * 原樣的輸出內聯style裏設置的width值，必須顯示的設置，不然爲空
         * */
        let styleWidth = elementName.style.width;
        console.log(styleWidth);

        /* scrollWidth爲元素的寬度，返回數值(包含padding值，不包含邊框寬度值)
         * 當元素沒有溢出時(子元素寬度小於父元素寬度)：此時與clientWidth值同樣
         * 當元素溢出時：(溢出值=子元素offsetWidth-[父元素offsetWidth-(父padding-left)-(父border-left)])
         * 當子元素box-sizing爲content-box時，scrollWidth=子元素offsetWidth+(父padding-right)
         * 當子元素box-sizing爲border-box時，
         * scrollWidth=子元素offsetWidth+(父padding-right)-(子border-left)-(子border-right)-(子padding-right)-(子padding-left)
         * */
        let elemScrollWidth = elementName.scrollWidth;
        console.log(elemScrollWidth);

        /* offsetTop爲元素的上外緣距離最近採用定位的父元素內壁的距離，返回數值，只讀
         * 若是父元素中沒有采用定位的，則是獲取元素的上外邊緣距離文檔對象內壁的距離
         * 定位只能爲position:relative，其餘定位值獲取的是文檔對象內壁的距離
         * */
        let elemOffsetTop = elementName.offsetTop;
        console.log(elemOffsetTop);

        /* offsetLeft爲元素的左外緣距離最近採用定位的父元素內壁的距離，返回數值，只讀
         * 若是父元素中沒有采用定位的，則是獲取元素的左外邊緣距離文檔對象內壁的距離
         * 定位只能爲position:relative，其餘定位值獲取的是文檔對象內壁的距離
         * */
        let elemOffsetLeft = elementName.offsetLeft;
        console.log(elemOffsetLeft);

        /* scrollHeight爲元素內容的實際高度
         * 包括元素高度、內邊距和溢出尺寸，不包括邊框和外邊距
         * 無溢出的狀況，與clientHeight相同
         * */
        let elemScrollHeight = elementName.scrollHeight;
        console.log(elemScrollHeight);

        /* scrollTop能夠獲取或者設置對象的最頂部到對象所在當前窗口顯示的範圍內的頂邊的距離
         * 也就是元素滾動條被向下拉動的距離
         * 返回數值，可讀寫
         * */
        let documentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(documentScrollTop);

        /* scrollLeft能夠獲取或者設置對象的最左邊到對象在當前窗口顯示的範圍內的左邊的距離
         * 也就是元素被滾動條向左拉動的距離
         * 返回數值，可讀寫
         * */
        let documentScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        console.log(documentScrollLeft);

        /* innerWidth窗口的文檔顯示區的寬度(不包含工具條與滾動條)，返回一個數值 */
        let windowInnerWidth = window.innerWidth;
        console.log(windowInnerWidth);

        /* availWidth爲瀏覽器屏幕的可用寬度，返回數值 */
        let screenAvailWidth = screen.availWidth;
        console.log(screenAvailWidth);

        /* clientWidth爲可視區的寬度，不包含滾動條的寬度 */
        let documentClientWidth = document.documentElement.clientWidth || document.body.clientWidth;
        console.log(documentClientWidth);

        elementName.onmousemove = function(event) {
            /* eventX爲鼠標相對於瀏覽器有效區域(除去工具欄等非html文檔的區域)左上角x軸的座標，不隨滾動條滾動而改變 */
            let eventX = event.clientX;
            console.log(eventX);

            /* pageX爲鼠標相對於瀏覽器有效區域(除去工具欄等非html文檔的區域)左上角x軸的座標，隨滾動條滾動而改變 */
            let pageX = event.pageX;
            console.log(pageX);

            /* screenX爲鼠標相對於顯示器屏幕左上角x軸的座標 */
            let screenX = event.screenX;
            console.log(screenX);

            /* offsetX爲鼠標相對於事件源左上角X軸的座標 */
            let offsetX = event.offsetX;
            console.log(offsetX);
        }
    })()
</script>

下面這個的話是我百度找的圖片

這個圖我感受有點複雜的樣子，

2.margin值合併的問題

當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者
還有一種就是：當父元素沒有設置內邊距或邊框,以及觸發BFC時,若是子元素的值大於父元素時，它會帶着父元素一塊兒偏移,此時子元素是相對除了它父級以外的離它最近的元素偏移的
解決方法的話，能夠改變二者的margin值，或者對元素設置border、padding，或者造成BFC