因為寫不出拖拽移動效果，我惡補了一下Dom中的各種距

因為寫不出拖拽移動效果，我惡補了一下Dom中的各種距離

文來源于：程序員成長指北；作者：去偽存真
如有侵權(quán)，聯(lián)系刪除

背景

最近在項目中要實現(xiàn)一個拖拽頭像的移動效果，一直對JS Dom拖拽這一塊不太熟悉，甚至在網(wǎng)上找一個示例，都看得云里霧里的，發(fā)現(xiàn)遇到最大的攔路虎就是JS Dom各種各樣的距離，讓人頭暈眼花，看到一個距離屬性，大腦中的印象極其模糊，如同有一團霧一樣，不知其確切含義。果然是基礎(chǔ)不牢，地動山搖。今天決心夯實一下基礎(chǔ)，親自動手驗證一遍dom各種距離的含義。

JS Dom各種距離釋義

下面我們進入正題, 筆者不善于畫圖, 主要是借助瀏覽器開發(fā)者工具，通過獲取的數(shù)值給大家說明一下各種距離的區(qū)別。

第一個發(fā)現(xiàn) window.devicePixelRatio 的存在

本打算用截圖軟件丈量尺寸，結(jié)果發(fā)現(xiàn)截圖軟件顯示的屏幕寬度與瀏覽器開發(fā)者工具獲取的寬度不一致，這是為什么呢?

截圖軟件顯示的屏幕寬度是1920

window.screen.width顯示的屏幕寬度是1536

這是怎么回事？原來在PC端，也存在一個設(shè)備像素比的概念。它告訴瀏覽器一個css像素應(yīng)該使用多少個物理像素來繪制。要說設(shè)備像素比，得先說一下像素和分辨率這兩個概念。

像素屏幕中最小的色塊，每個色塊稱之為一個像素（Pixel）

分辨率 分辨率=屏幕水平方向的像素點數(shù) * 屏幕垂直方向的像素點數(shù); 另外說一下,關(guān)于分辨率有多種定義,可以細分為顯示分辨率[1]、圖像分辨率[2]、打印分辨率[3]和掃描分辨率[4]等，此處是指顯示分辨率。

設(shè)備像素比

設(shè)備像素比的定義是：

window.devicePixelRatio=顯示設(shè)備物理像素分辨率顯示設(shè)備CSS像素分辨率\frac{顯示設(shè)備物理像素分辨率}{顯示設(shè)備CSS像素分辨率}顯示設(shè)備CSS像素分辨率顯示設(shè)備物理像素分辨率

根據(jù)設(shè)備像素比的定義, 如果知道顯示設(shè)備橫向的css像素值，根據(jù)上面的公式，就能計算出顯示設(shè)備橫向的物理像素值。

顯示設(shè)備寬度物理像素值=window.screen.width * window.devicePixelRatio;

設(shè)備像素比在我的筆記本電腦上顯示的數(shù)值是1.25, 代表一個css邏輯像素對應(yīng)著1.25個物理像素。

我前面的公式計算了一下，與截圖軟件顯示的像素數(shù)值一致。這也反過來說明，截圖軟件顯示的是物理像素值。

window.devicePixelRatio 是由什么決定的 ?

發(fā)現(xiàn)是由筆記本電腦屏幕的縮放設(shè)置決定的，如果設(shè)置成100%, 此時window.screen.width與筆記本電腦的顯示器分辨率X軸方向的數(shù)值一致,都是1920(如右側(cè)圖所示), 此時屏幕上的字會變得比較小,比較傷視力。

邏輯像素是為了解決什么問題?

邏輯像素是為了解決屏幕相同，分辨率不同的兩臺顯示設(shè)備，顯示同一張圖片大小明顯不一致的問題。比如說兩臺筆記本都是15英寸的，一個分辨率是1920*1080,一個分辨率是960*540, 在1920*1080分辨率的設(shè)備上，每個格子比較小，在960*540分辨率的設(shè)備上，每個格子比較大。一張200*200的圖片，在高分率的設(shè)備上看起來會比較小，在低分辨率的設(shè)備上，看起來會比較大。觀感不好。為了使同樣尺寸的圖片，在兩臺屏幕尺寸一樣大的設(shè)備上，顯示尺寸看起來差不多一樣大，發(fā)明了邏輯像素這個概念。

規(guī)定所有電子設(shè)備呈現(xiàn)的圖片等資源尺寸統(tǒng)一用邏輯像素表示。然后在高分辨率設(shè)備上，提高devicePixelRatio, 比如說設(shè)置1920*1080設(shè)備的devicePixelRatio(dpr)等于2, 一個邏輯像素占用兩個格子,在低分辨率設(shè)備上，比如說在960*540設(shè)備上設(shè)置dpr=1, 一個css邏輯像素占一個格子, 這樣兩張圖片在同樣的設(shè)備上尺寸大小就差不多了。通常設(shè)備上的邏輯像素是等于物理像素的，在高分辨率設(shè)備上，物理像素是大于邏輯像素數(shù)量的。由此也可以看出，物理像素一出廠就是固定的，而設(shè)備的邏輯像素會隨著設(shè)備像素比設(shè)置的值不同而改變。但圖片的邏輯像素值是不變的。

document.body、document.documentElement和window.screen的寬高區(qū)別

差別是很容易辨別的，如下圖所示：

document.body -- body標(biāo)簽的寬高
document.documentElement -- 網(wǎng)頁可視區(qū)域的寬高(不包括滾動條)
window.screen -- 屏幕的寬高

網(wǎng)頁可視區(qū)域不包括滾動條

如下圖所示，截圖時在未把網(wǎng)頁可視區(qū)域的滾動條高度計算在內(nèi)的條件下, 截圖工具顯示的網(wǎng)頁可視區(qū)域高度是168, 瀏覽器顯示的網(wǎng)頁可視區(qū)域的高度是167.5, 誤差0.5，由于截圖工具是手動截圖，肯定有誤差，結(jié)果表明，網(wǎng)頁可視區(qū)域的高度 不包括滾動條高度。寬度同理。

屏幕和網(wǎng)頁可視區(qū)域的寬高區(qū)別如下：

屏幕寬高是個固定值，網(wǎng)頁可視區(qū)域?qū)捀邥艿娇s放窗口影響。

屏幕高度和屏幕可用高度區(qū)別如下：

屏幕可用高度=屏幕高度-屏幕下方任務(wù)欄的高度，也就是：

window.screen.availHeight=window.screen.height - 系統(tǒng)任務(wù)欄高度

scrollWidth, scrollLeft, clientWidth關(guān)系

scrollWidth(滾動寬度,包含滾動條的寬度)=scrollLeft(左邊卷去的距離)+clientWidth(可見部分寬度); 
// 同理 
scrollHeight(滾動高度,包含滾動條的高度)=scrollTop(上邊卷去的距離)+clientHeight(可見部分高度);

需要注意的是，上面這三個屬性，都取的是溢出元素的父級元素屬性。而不是溢出元素本身。本例中溢出元素是body(document.body),其父級元素是html(document.documentElement)。另外，

溢出元素的寬度(document.body.scrollWidth）=父級元素的寬度(document.documentElement.scrollWidth) - 滾動條的寬度(在谷歌瀏覽器上滾動條的寬度是19px)

<!DOCTYPE html> 
<html lang="en"> 
  <head>     
    <meta charset="UTF-8">     
    <meta http-equiv="X-UA-Compatible" content="IE=edge">     
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->     
    <title>JS Dom各種距離</title>     
    <style>         
      html, body {             
        margin: 0;         
      }         
      body {             
        width: 110%;             
        border: 10px solid blue;         
      }         
      .rect {             
        height: 50px;             
        background-color: green;         
      }     
    </style> 
  </head> 
  <body>     
    <div id="rect" class="rect"></div> 
  </body> 
</html>

元素自身和父級元素的scrollWidth和scrollLeft關(guān)系?

從下圖可以看出:

元素自身沒有X軸偏移量，元素自身的滾動寬度不包含滾動條
父級元素有X軸便宜量, 父級元素滾動寬度包含滾動條

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>JS Dom各種距離</title>
    <style>
        div {
            border: 1px solid #000;
            width: 200px;
            height: 600px;
            padding: 10px;
            background-color: green;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="rect">    111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    </div>
</body>
<script>
</script>
</html>

offsetWidth和clientWidth的關(guān)系?

offsetWidth和clientWidth的共同點是都包括自身寬度+padding , 不同點是offsetWidth包含border。

如下圖所示:

rect元素的clientWidth=200px(自身寬度) + 20px(左右padding)=220px
rect元素的offsetWidth=200px(自身寬度) + 20px(左右padding) + 2px(左右boder)=222px

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>JS Dom各種距離</title>
    <style>
        div {
            border: 1px solid #000;
            width: 200px;
            height: 100px;
            padding: 10px;
            background-color: green;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="rect">111111111111111111111111111111111111111111111111</div>
</body>
<script>


</script>

</html>

event.clientX，event.clientY, event.offsetX 和 event.offsetY 關(guān)系

代碼如下，給rect元素添加一個mousedown事件，打印出事件源的各種位置值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>JS Dom各種距離</title>
    <style>
        html,
        body {
            margin: 0;
        }

        body {
            width: 200px;
            padding: 10px;
            border: 10px solid blue;
        }

        .rect {
            height: 50px;
            background-color: green;
        }
    </style>
</head>

<body>

    <div id="rect" class="rect"></div>


</body>
<script>
    const rectDom=document.querySelector('#rect');

    rectDom.addEventListener('mousedown', ({ offsetX, offsetY, clientX, clientY, pageX, pageY, screenX, screenY })=> {
        console.log({ offsetX, offsetY, clientX, clientY, pageX, pageY, screenX, screenY });
    })
</script>

</html>

我們通過y軸方向的高度值,了解一下這幾個屬性的含義。綠色塊的高度是50px, 我們找個特殊的位置（綠色塊的右小角）點擊一下，如下圖所示:

offsetY=49, 反推出這個值是相對于元素自身的頂部的距離
clientY=69, body標(biāo)簽的border-top是10，paiding是10, 反推出這個值是相對網(wǎng)頁可視區(qū)域頂部的距離
screenY=140，目測肯定是基于瀏覽器窗口，

所以它們各自的含義,就很清楚了。

事件源屬性	表示的距離
event.offsetX、event.offsetY	鼠標(biāo)相對于事件源元素（srcElement）的X,Y坐標(biāo)，
event.clientX、event.clientY	鼠標(biāo)相對于瀏覽器窗口可視區(qū)域的X，Y坐標(biāo)（窗口坐標(biāo)），可視區(qū)域不包括工具欄和滾動偏移量。
event.pageX、event.pageY	鼠標(biāo)相對于文檔坐標(biāo)的x,y坐標(biāo)，文檔坐標(biāo)系坐標(biāo) ＝視口坐標(biāo)系坐標(biāo) ＋滾動的偏移量
event.screenX、event.screenY	鼠標(biāo)相對于用戶顯示器屏幕左上角的X,Y坐標(biāo)

pageX和clientX的關(guān)系

我們點擊下圖綠色塊的右下角，把pageX和clientX值打印出來。如下圖所示:

可視區(qū)域的寬度是360，點擊點的clientX=359(由于是手動點擊,有誤差也正常)
水平方向的偏移量是56
pageX是415，360+56=416,考慮到點擊誤差，可以推算出 ele.pageX=ele.clientX + ele.scrollLeft

getBoundingClientRect獲取的top,bottom,left,right的含義

從下圖可以看出，上下左右這四個屬性，都是相對于瀏覽器可視區(qū)域左上角而言的。

從下圖可以看出，當(dāng)有滾動條出現(xiàn)的時候，right的值是359.6，而不是360+156(x軸的偏移量), 說明通過getBoundingClientRect獲取的屬性值是不計算滾動偏移量的，是相對瀏覽器可視區(qū)域而言的。

movementX和movementY的含義?

MouseEvent.movementX/movementX是一個相對偏移量。返回當(dāng)前位置與上一個mousemove事件之間的水平/垂直距離。以當(dāng)前位置為基準(zhǔn), 鼠標(biāo)向左移動, movementX就是負(fù)值，向右移動，movementX就是正值。鼠標(biāo)向上移動,movementY就是負(fù)值，向下移動，movementY就是正值。數(shù)值上，它們等于下面的計算公式。這兩個值在設(shè)置拖拽距離的時候高頻使用，用起來很方便。

curEvent.movementX=curEvent.screenX - prevEvent.screenX; 
curEvent.movementY=curEvent.screenY - prevEvent.screenY;

想移動元素，mouse和drag事件怎么選?

mouse事件相對簡單，只有mousedown(開始),mousemove(移動中),mouseup(結(jié)束)三種。與之對應(yīng)的移動端事件是touch事件，也是三種touchstart(手指觸摸屏幕), touchmove(手指在屏幕上移動), touchend(手指離開屏幕)。

相對而言, drag事件就要豐富一些。

被拖拽元素事件

事件名	觸發(fā)時機	觸發(fā)次數(shù)
dragstart	拖拽開始時觸發(fā)一次	1
drag	拖拽開始后反復(fù)觸發(fā)	多次
dragend	拖拽結(jié)束后觸發(fā)一次	1

目標(biāo)容器事件

事件名	觸發(fā)時機	觸發(fā)次數(shù)
dragenter	被拖拽元素進入目標(biāo)時觸發(fā)一次	1
dragover	被拖拽元素在目標(biāo)容器范圍內(nèi)時反復(fù)觸發(fā)	多次
drop	被拖拽元素在目標(biāo)容器內(nèi)釋放時(前提是設(shè)置了dropover事件)	1

想要移動一個元素，該如何選擇這兩種事件類型呢？選擇依據(jù)是:

類型	選擇依據(jù)
mouse事件	1. 要求絲滑的拖拽體驗 2. 無固定的拖拽區(qū)域 3. 無需傳數(shù)據(jù)
drag事件	1. 拖拽區(qū)域有范圍限制 2. 對拖拽流暢性要求不高 3. 拖拽時需要傳數(shù)據(jù)

現(xiàn)在讓我們寫個拖拽效果

光說不練假把式, 掃清了學(xué)習(xí)障礙后，讓我們自信滿滿地寫一個兼容PC端和移動端的拖動效果。不積跬步無以至千里，幻想一口吃個胖子，是不現(xiàn)實的。這一點在股市上體現(xiàn)的淋漓盡致。都是有耐心的人賺急躁的人的錢。所以，要我們沉下心來，打牢基礎(chǔ)，硬骨頭啃一點就會少一點，步步為營，穩(wěn)扎穩(wěn)打，硬骨頭也會被啃成渣。

<!DOCTYPE html>
<html lang="en">

<head>
        
    <meta charset="UTF-8" />    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
    <title>移動小鳥</title>
    <style>
        body {
            margin: 0;
            font-size: 0;
            position: relative;
            height: 100vh;
        }

        .bird {
            position: absolute;
            width: 100px;
            height: 100px;
            cursor: grab;
            z-index: 10;
        }
    </style>
</head>

<body>
    <img class="bird" src="./bird.png" alt="" />  
</body>

<script>
    let evtName=getEventName();
    // 鼠標(biāo)指針相對于瀏覽器可視區(qū)域的偏移
    let offsetX=0, offsetY=0;
    // 限制圖片可以X和Y軸可以移動的最大范圍，防止溢出
    let limitX=0, limitY=0;

    // 確保圖片加載完
    window.onload=()=> {
        const bird=document.querySelector(".bird");
        const { width, height }=bird;

        limitX=document.documentElement.clientWidth - width;
        limitY=document.documentElement.clientHeight - height;

        bird.addEventListener(evtName.start, (event)=> {
            // 監(jiān)聽鼠標(biāo)指針相對于可視窗口移動的距離
            // 注意移動事件要綁定在document元素上，防止移動過快,位置丟失
            document.addEventListener(evtName.move, moveAt);
        });

        // 鼠標(biāo)指針停止移動時,釋放document上綁定的移動事件
        // 不然白白產(chǎn)生性能開銷
        document.addEventListener(evtName.end, ()=> {
            document.removeEventListener(evtName.move, moveAt);
        })

        // 移動元素
        function moveAt({ movementX, movementY }) {
            const { offsetX, offsetY }=getSafeOffset({ movementX, movementY });

            window.requestAnimationFrame(()=> {
                bird.style.cssText=`left:${offsetX}px;top:${offsetY}px;`;
            });
        };
    };

    // 獲取安全的偏移距離
    const getSafeOffset=({ movementX, movementY })=> {
        // //距上次鼠標(biāo)位置的X,Y方向的偏移量
        offsetX +=movementX;
        offsetY +=movementY;

        // 防止拖拽元素被甩出可視區(qū)域
        if (offsetX > limitX) {
            offsetX=limitX;
        }

        if (offsetX < 0) {
            offsetX=0;
        }

        if (offsetY > limitY) {
            offsetY=limitY;
        }

        if (offsetY < 0) {
            offsetY=0;
        }

        // console.log({ movementX, movementY, offsetX, offsetY });
        return { offsetX, offsetY };
    }

    // 區(qū)分是移動端還是PC端移動事件
    function getEventName() {
        if ("ontouchstart" in window) {
            return {
                start: "touchstart",
                move: "touchmove",
                end: "touchend",
            };
        } else {
            return {
                start: "pointerdown",
                move: "pointermove",
                end: "pointerup",
            };
        }
    }
</script>

</html>

彩蛋

在chrome瀏覽器上發(fā)現(xiàn)一個奇怪的現(xiàn)象,設(shè)置的border值是整數(shù)，計算出來的值卻帶有小數(shù)

而當(dāng)border值是4的整數(shù)倍的時候,計算值是正確的

看了這篇文章[5]解釋說，瀏覽器可能只能渲染具有整數(shù)物理像素的border值，不是整數(shù)物理像素的值時，計算出的是近似border值。這個解釋似乎講得通，在設(shè)備像素比是window.devicePixelRatio=1.25的情況下, 1px對應(yīng)的是1.25物理像素, 1.25*4的倍數(shù)才是整數(shù)，所以設(shè)置的邏輯像素是4的整數(shù)倍數(shù)，顯示的渲染計算值與設(shè)置值一致,唯一讓人不理解的地方，為什么padding,margin，width/height卻不遵循同樣的規(guī)則。

參考資料

[1] https://baike.baidu.com/item/%E6%98%BE%E7%A4%BA%E5%88%86%E8%BE%A8%E7%8E%87/3431933?fromModule=lemma_inlink

[2] https://baike.baidu.com/item/%E5%9B%BE%E5%83%8F%E5%88%86%E8%BE%A8%E7%8E%87/872374?fromModule=lemma_inlink

[3] https://baike.baidu.com/item/%E6%89%93%E5%8D%B0%E5%88%86%E8%BE%A8%E7%8E%87/9560832?fromModule=lemma_inlink

[4] https://baike.baidu.com/item/%E6%89%AB%E6%8F%8F%E5%88%86%E8%BE%A8%E7%8E%87/7122498?fromModule=lemma_inlink

[5] https://www.w3.org/TR/CSS22/cascade.html#specified-value

下圖所示根據(jù)標(biāo)注的尺寸，用CAD畫圖軟件繪制出一樣的圖形：

目標(biāo)對象

操作工具

操作系統(tǒng)：Windows10

CAD軟件：CAD夢想畫圖

步驟

1.使用CAD多線段命令，畫一條長為20的直線、直徑為10的圓弧，如下圖所示：

繪制多線段

2.使用CAD偏移命令，偏移距離為5向外偏移出其它線條，如下圖所示：（CAD偏移命令使用教程鏈接：https://www.mxdraw3d.com/newsInfo_69.html）

使用偏移命令

3.以下圖的A點為陣列中心，使用CAD環(huán)形陣列命令，陣列參數(shù)如下圖所示：

陣列參數(shù)

4.陣列后如下圖所示：（CAD軟件陣列命令使用教程鏈接：https://www.mxdraw3d.com/newsInfo_70.html）

陣列效果

5.最后添加尺寸標(biāo)注，效果如下圖所示：

繪制完成

文章出自CAD夢想畫圖官網(wǎng)

SS 有兩個最重要的基本屬性，前端開發(fā)必須掌握：display和position。

display屬性指定網(wǎng)頁的布局。兩個重要的布局，我已經(jīng)介紹過了：彈性布局flex^[1]和網(wǎng)格布局grid^[2]。

本文介紹非常有用的position屬性。我希望通過10分鐘的閱讀，幫助大家輕松掌握網(wǎng)頁定位，說清楚瀏覽器如何計算網(wǎng)頁元素的位置，尤其是新引進的sticky定位。

本文由國內(nèi)最大的在線教育平臺之一“騰訊課堂”^[3]贊助。他們現(xiàn)在啟動了“騰訊課堂101計劃”^[4]，推廣平臺上的課程資源，有不少優(yōu)質(zhì)內(nèi)容。希望提高前端技術(shù)水平的同學(xué)，可以留意一下本文結(jié)尾的免費課程信息。

一、position 屬性的作用

position屬性用來指定一個元素在網(wǎng)頁上的位置，一共有5種定位方式，即position屬性主要有五個值。

?static?relative?fixed?absolute?sticky

下面就依次介紹這五個值。最后一個sticky是2017年瀏覽器才支持的，本文將重點介紹。

二、static 屬性值

static是position屬性的默認(rèn)值。如果省略position屬性，瀏覽器就認(rèn)為該元素是static定位。

這時，瀏覽器會按照源碼的順序，決定每個元素的位置，這稱為“正常的頁面流”（normal flow）。每個塊級元素占據(jù)自己的區(qū)塊（block），元素與元素之間不產(chǎn)生重疊，這個位置就是元素的默認(rèn)位置。

注意，static定位所導(dǎo)致的元素位置，是瀏覽器自主決定的，所以這時top、bottom、left、right這四個屬性無效。

三、relative，absolute，fixed

relative、absolute、fixed這三個屬性值有一個共同點，都是相對于某個基點的定位，不同之處僅僅在于基點不同。所以，只要理解了它們的基點是什么，就很容易掌握這三個屬性值。

這三種定位都不會對其他元素的位置產(chǎn)生影響，因此元素之間可能產(chǎn)生重疊。

3.1 relative 屬性值

relative表示，相對于默認(rèn)位置（即static時的位置）進行偏移，即定位基點是元素的默認(rèn)位置。

它必須搭配top、bottom、left、right這四個屬性一起使用，用來指定偏移的方向和距離。

div { position: relative; top: 20px;}

上面代碼中，div元素從默認(rèn)位置向下偏移20px（即距離頂部20px）。

3.2 absolute 屬性值

absolute表示，相對于上級元素（一般是父元素）進行偏移，即定位基點是父元素。

它有一個重要的限制條件：父元素不能是static定位，否則定位基點就會變成整個網(wǎng)頁的根元素html。另外，absolute定位也必須搭配top、bottom、left、right這四個屬性一起使用。

/* HTML 代碼如下 <div id="father"> <div id="son"></div> </div>*/
#father { positon: relative;}#son { position: absolute; top: 20px;}

上面代碼中，父元素是relative定位，子元素是absolute定位，所以子元素的定位基點是父元素，相對于父元素的頂部向下偏移20px。如果父元素是static定位，上例的子元素就是距離網(wǎng)頁的頂部向下偏移20px。

注意，absolute定位的元素會被“正常頁面流”忽略，即在“正常頁面流”中，該元素所占空間為零，周邊元素不受影響。

3.3 fixed 屬性值

fixed表示，相對于視口（viewport，瀏覽器窗口）進行偏移，即定位基點是瀏覽器窗口。這會導(dǎo)致元素的位置不隨頁面滾動而變化，好像固定在網(wǎng)頁上一樣。

它如果搭配top、bottom、left、right這四個屬性一起使用，表示元素的初始位置是基于視口計算的，否則初始位置就是元素的默認(rèn)位置。

div { position: fixed; top: 0;}

上面代碼中，div元素始終在視口頂部，不隨網(wǎng)頁滾動而變化。

四、sticky 屬性值

sticky跟前面四個屬性值都不一樣，它會產(chǎn)生動態(tài)效果，很像relative和fixed的結(jié)合：一些時候是relative定位（定位基點是自身默認(rèn)位置），另一些時候自動變成fixed定位（定位基點是視口）。

因此，它能夠形成“動態(tài)固定”的效果。比如，網(wǎng)頁的搜索工具欄，初始加載時在自己的默認(rèn)位置（relative定位）。

頁面向下滾動時，工具欄變成固定位置，始終停留在頁面頭部（fixed定位）。

等到頁面重新向上滾動回到原位，工具欄也會回到默認(rèn)位置。

sticky生效的前提是，必須搭配top、bottom、left、right這四個屬性一起使用，不能省略，否則等同于relative定位，不產(chǎn)生“動態(tài)固定”的效果。原因是這四個屬性用來定義“偏移距離”，瀏覽器把它當(dāng)作sticky的生效門檻。

它的具體規(guī)則是，當(dāng)頁面滾動，父元素開始脫離視口時（即部分不可見），只要與sticky元素的距離達到生效門檻，relative定位自動切換為fixed定位；等到父元素完全脫離視口時（即完全不可見），fixed定位自動切換回relative定位。

請看下面的示例代碼。（注意，除了已被淘汰的 IE 以外，其他瀏覽器目前都支持sticky。但是，Safari 瀏覽器需要加上瀏覽器前綴-webkit-。）

#toolbar { position: -webkit-sticky; /* safari 瀏覽器 */ position: sticky; /* 其他瀏覽器 */ top: 20px;}

上面代碼中，頁面向下滾動時，#toolbar的父元素開始脫離視口，一旦視口的頂部與#toolbar的距離小于20px（門檻值），#toolbar就自動變?yōu)?code>fixed定位，保持與視口頂部20px的距離。頁面繼續(xù)向下滾動，父元素徹底離開視口（即整個父元素完全不可見），#toolbar恢復(fù)成relative定位。

五、 sticky 的應(yīng)用

sticky定位可以實現(xiàn)一些很有用的效果。除了上面提到“動態(tài)固定”效果，這里再介紹兩個。

5.1 堆疊效果

堆疊效果（stacking）指的是頁面滾動時，下方的元素覆蓋上方的元素。下面是一個圖片堆疊的例子，下方的圖片會隨著頁面滾動，覆蓋上方的圖片（查看 demo^[5]）。

HTML 代碼就是幾張圖片。

<div><img src="pic1.jpg"></div><div><img src="pic2.jpg"></div><div><img src="pic3.jpg"></div>

CSS 代碼極其簡單，只要兩行。

div { position: sticky; top: 0;}

它的原理是頁面向下滾動時，每張圖片都會變成fixed定位，導(dǎo)致后一張圖片重疊在前一張圖片上面。詳細解釋可以看這里^[6]。

5.2 表格的表頭鎖定

大型表格滾動的時候，表頭始終固定，也可以用sticky實現(xiàn)（查看 demo^[7]）。

CSS 代碼也很簡單。

th { position: sticky; top: 0; }

需要注意的是，sticky必須設(shè)在<th>元素上面，不能設(shè)在<thead>和<tr>元素，因為這兩個元素沒有relative定位，也就無法產(chǎn)生sticky效果。詳細解釋可以看這里^[8]。

（正文完）

免費前端全棧課程

初學(xué)者剛接觸前端，往往會被一大堆技術(shù)名詞、框架和工具，搞得眼花繚亂。

到底哪些技術(shù)是目前的主流技術(shù)棧，既能用于公司的開發(fā)實務(wù)，又能為自己的簡歷增添亮點？

下面就是一套目前主流的前端技術(shù)棧。

（1）Node.js：服務(wù)器端的 JavaScript 運行環(huán)境，不管哪種前端開發(fā)，都必不可少的底層環(huán)境。

（2）Webpack：語法轉(zhuǎn)換工具，把 ES6/TypeScript/JSX 語法轉(zhuǎn)成瀏覽器可以運行的代碼。

（3）Koa2：一個非常流行、簡潔強大的 Node.js 后端的 Web 開發(fā)框架。

（4）MongoDB：目前應(yīng)用最廣泛的非關(guān)系數(shù)據(jù)庫之一，功能豐富，用法較簡單。

（5）Vue 全家桶：

?Vue：前端基礎(chǔ)框架?Vuex：配套的前端狀態(tài)管理庫。?Vue Router：官方的路由插件，構(gòu)建單頁面應(yīng)用必不可少。?Vue CLI：腳手架工具，幫你快速上手 Vue 開發(fā)，無需再花多余時間去實現(xiàn)項目架構(gòu)。?Vant：有贊前端團隊開發(fā)的輕量級移動端 Vue 組件庫，讓你快速使用已經(jīng)封裝好的各種頁面組件。

看到這個名單，你是不是感到有點頭大，全部掌握它們需要多少時間??？

現(xiàn)在，騰訊課堂就有一門這樣的課程，內(nèi)容包含了所有這些工具，教你怎么用它們從頭完成一個全棧項目，親手做出一個手機端的移動商城，是由 慕課網(wǎng)的精英講師--謝成老師講授。

該課程的制作單位是青盟科技。它是《騰訊課堂101計劃》重點推廣的優(yōu)質(zhì)機構(gòu)，已有7年 IT 行業(yè)教學(xué)經(jīng)驗，培養(yǎng)收費學(xué)員2000+，有超過72%的學(xué)員都進入到名企大廠。如果你想了解課程的詳細內(nèi)容，獲取課程大綱，或者想接受系統(tǒng)的前端培訓(xùn)，可以登錄騰訊課堂查看“青盟科技”。

（完）

References

[1]彈性布局flex:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

[2]網(wǎng)格布局grid:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

[3]“騰訊課堂”:https://ke.qq.com/?utm=ruanyifeng

[4]“騰訊課堂101計劃”:https://edu.qq.com/a/20190119/005414.htm

[5]demo:https://jsbin.com/fegiqoquki/edit?html,css,output

[6]這里:https://dev.to/vinceumo/slide-stacking-effect-using-position-sticky-91f

[7]demo:https://jsbin.com/decemanohe/edit?html,css,output

[8]這里:https://css-tricks.com/position-sticky-and-table-headers/

在線咨詢

上一篇：深入HTTP請求流程
下一篇：一起學(xué)javaFx-svg2png

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

因為寫不出拖拽移動效果，我惡補了一下Dom中的各種距

背景