c 2015 做网站,centos7 wordpress网站,搜索引擎优化怎么做,上海闵行邮编css面板视觉高度
touch拖拽
在手机端有时候会存在实现touch上拉或者下拉的样式操作
此功能实现可以参考#xff1a;
https://blog.csdn.net/u012953777/article/details/147465162?spm1011.2415.3001.5331
面板视觉高度
前提需求#xff1a;
1、展示端分为两部分
https://blog.csdn.net/u012953777/article/details/147465162?spm1011.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代表这个元素距离浏览器顶部 100pxrect.left 50代表元素距离浏览器左边 50px
第二句const visualHeight window.innerHeight - rect.top; window.innerHeight 是浏览器可视区域的高度不包括滚动条和浏览器外壳。 rect.top 是元素顶部到可视区顶部的距离。
所以
window.innerHeight - rect.top的意思是 从元素的 top 位置到浏览器可视区底部的剩余空间高度 也就是说
如果元素已经快贴到浏览器底部了这个 visualHeight 会很小。
如果元素刚出现在视口顶部visualHeight 会很大
