css面板视觉高度
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 会很大