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

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

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

背景

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

JS Dom各種距離釋義

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

第一個發現 window.devicePixelRatio 的存在

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

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

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

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

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

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

設備像素比

設備像素比的定義是：

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

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

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

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

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

window.devicePixelRatio 是由什么決定的 ?

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

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

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

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

document.body、document.documentElement和window.screen的寬高區別

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

document.body -- body標簽的寬高
document.documentElement -- 網頁可視區域的寬高(不包括滾動條)
window.screen -- 屏幕的寬高

網頁可視區域不包括滾動條

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

屏幕和網頁可視區域的寬高區別如下：

屏幕寬高是個固定值，網頁可視區域寬高會受到縮放窗口影響。

屏幕高度和屏幕可用高度區別如下：

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

window.screen.availHeight=window.screen.height - 系統任務欄高度

scrollWidth, scrollLeft, clientWidth關系

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關系?

從下圖可以看出:

元素自身沒有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的關系?

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 關系

代碼如下，給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標簽的border-top是10，paiding是10, 反推出這個值是相對網頁可視區域頂部的距離
screenY=140，目測肯定是基于瀏覽器窗口，

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

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

pageX和clientX的關系

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

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

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

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

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

movementX和movementY的含義?

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

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

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

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

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

被拖拽元素事件

事件名	觸發時機	觸發次數
dragstart	拖拽開始時觸發一次	1
drag	拖拽開始后反復觸發	多次
dragend	拖拽結束后觸發一次	1

目標容器事件

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

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

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

現在讓我們寫個拖拽效果

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

<!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();
    // 鼠標指針相對于瀏覽器可視區域的偏移
    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)=> {
            // 監聽鼠標指針相對于可視窗口移動的距離
            // 注意移動事件要綁定在document元素上，防止移動過快,位置丟失
            document.addEventListener(evtName.move, moveAt);
        });

        // 鼠標指針停止移動時,釋放document上綁定的移動事件
        // 不然白白產生性能開銷
        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 })=> {
        // //距上次鼠標位置的X,Y方向的偏移量
        offsetX +=movementX;
        offsetY +=movementY;

        // 防止拖拽元素被甩出可視區域
        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 };
    }

    // 區分是移動端還是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瀏覽器上發現一個奇怪的現象,設置的border值是整數，計算出來的值卻帶有小數

而當border值是4的整數倍的時候,計算值是正確的

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

參考資料

[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

下圖所示根據標注的尺寸，用CAD畫圖軟件繪制出一樣的圖形：

目標對象

操作工具

操作系統：Windows10

CAD軟件：CAD夢想畫圖

步驟

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

繪制多線段

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

使用偏移命令

3.以下圖的A點為陣列中心，使用CAD環形陣列命令，陣列參數如下圖所示：

陣列參數

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

陣列效果

5.最后添加尺寸標注，效果如下圖所示：

繪制完成

文章出自CAD夢想畫圖官網

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

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

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

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

一、position 屬性的作用

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

?static?relative?fixed?absolute?sticky

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

二、static 屬性值

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

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

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

三、relative，absolute，fixed

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

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

3.1 relative 屬性值

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

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

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

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

3.2 absolute 屬性值

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

它有一個重要的限制條件：父元素不能是static定位，否則定位基點就會變成整個網頁的根元素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定位，上例的子元素就是距離網頁的頂部向下偏移20px。

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

3.3 fixed 屬性值

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

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

div { position: fixed; top: 0;}

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

四、sticky 屬性值

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

因此，它能夠形成“動態固定”的效果。比如，網頁的搜索工具欄，初始加載時在自己的默認位置（relative定位）。

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

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

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

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

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

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

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

五、 sticky 的應用

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

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定位，導致后一張圖片重疊在前一張圖片上面。詳細解釋可以看這里^[6]。

5.2 表格的表頭鎖定

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

CSS 代碼也很簡單。

th { position: sticky; top: 0; }

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

（正文完）

免費前端全棧課程

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

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

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

（1）Node.js：服務器端的 JavaScript 運行環境，不管哪種前端開發，都必不可少的底層環境。

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

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

（4）MongoDB：目前應用最廣泛的非關系數據庫之一，功能豐富，用法較簡單。

（5）Vue 全家桶：

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

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

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

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

（完）

References

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

[2]網格布局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請求流程
下一篇：一起學javaFx-svg2png

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

背景