css面板視覺高度
touch拖拽
在手機端有時候會存在實現touch上拉或者下拉的樣式操作
此功能實現可以參考：
https://blog.csdn.net/u012953777/article/details/147465162?spm=1011.2415.3001.5331
面板視覺高度
前提需求：
1、展示端分為兩部分：上面展示一部分內容、下一部分展示面板
2、通過拖拉下部分面板，上一部分高度需要同步的變化
3、如何準確的獲取當前的視覺高度，從而執行上部分精準的變化
核心代碼實現如下:
//獲取當前面板的實際視覺高度
const getPanelVisualHeight = () =>{const rect = panel.getBoundingClientRect();const visualHeight = window.innerHeight - rect.top;return visualHeight;
}
- 詳細解釋：
第一句：const rect = panel.getBoundingClientRect();
panel是頁面上的一個DOM 元素，比如你選中的一個
getBoundingClientRect() 是 DOM 提供的一個 API，它返回一個矩形對象，里面包含了元素相對于視口（也就是瀏覽器可視區域左上角）的位置信息，比如：
-
rect.top：元素上邊到視口上邊緣的距離（單位是像素）
-
rect.left：元素左邊到視口左邊緣的距離
-
rect.width：元素的寬度
-
rect.height：元素的高度
-
rect.bottom：元素下邊到視口上邊緣的距離
-
rect.right：元素右邊到視口左邊緣的距離
注意：
getBoundingClientRect() 返回的是相對可視區域的，不是相對整個頁面的！
比如：
| 屬性 | 例子解釋 |
|---|---|
| rect.top = 100 | 代表這個元素距離瀏覽器頂部 100px |
| rect.left = 50 | 代表元素距離瀏覽器左邊 50px |
第二句：const visualHeight = window.innerHeight - rect.top;
-
window.innerHeight 是瀏覽器可視區域的高度（不包括滾動條和瀏覽器外殼）。
-
rect.top 是元素頂部到可視區頂部的距離。
所以：
window.innerHeight - rect.top
的意思是：
從元素的 top 位置到瀏覽器可視區底部的剩余空間高度
也就是說：
如果元素已經快貼到瀏覽器底部了，這個 visualHeight 會很小。
如果元素剛出現在視口頂部，visualHeight 會很大
