ele.getBoundingClientRect()使用

ele.getBoundingClientRect()是获取元素的大小以及相对于视口的位置。

执行该方法会获取到元素的width、height、top、left、right、bottom、x和y等属性。其中：

y、top：是指元素上方距离视口上方的距离

x、left：是指元素左侧距离视口左侧的距离

right：是指元素右侧距离视口左侧的距离

bottom：是指元素下方距离视口上方的距离

下方为元素的位置视图：

在浏览器中获取body的相对窗口位置：

下图是当窗口没有法伤滚动时获取的body的位置

下面是发生滚动时body相对窗口的位置

由此可知，获取到的元素的位置时相对于可视窗口的，而不是内容窗口，此时top的绝对值应与父级窗口的scrollTop相同

ele.getBoundingClientRect()使用相关推荐

html 滚动条停止事件,CSS scroll-snap滚动事件停止及元素位置检测实现
一.Scroll Snap是前端必备技能 CSS Scroll Snap是个非常好用的特性,可以让网页容器滚动停止的时候,无需任何JS代码的参与,浏览器可以自动平滑定位到指定元素的指定位置.类似幻灯片 ...
javascript代码
LazyMan 实现LazyMan(什么是LazyMan?请自行google) function _LazyMan(_name) {var _this = this; _this.tasks = [] ...
html5 手机端分页,哪位大神可以提供个移动端h5下拉分页的方法
例如,京东的分页效果 $PageIndex = 1; var $uzaiProducts = $doc.getElementsByClassName('uzai-products')[0]; // 产 ...
DOM2和DOM3读书笔记
二刷<高程>做的笔记,没什么技术含量就不发到首页啦!~ DOM1级主要定义HTML和XML文档底层结构,DOM2和DOM3在这个结构基础上引入更多交互能力,也支持更高级的XML特性.DOM ...
前端搞一个扭蛋抽奖小动画？
最近新增一个抽奖小模块,就是扭蛋机的形式,产品给了参考网页,奈何不好扒下来用,只得自己动手干了,不多bb,先看效果吧! 效果图: 动画分析由上面gif可看出,整个动画分为四个部分扭蛋随机(也不算随 ...
前端 JS实现彩票开奖走势图连线
之前做过一个用canvas实现的走势图效果,这次直接用JS实现吧.(在vue3 + TS的项目中实现的) 一.渲染页面的时候把需要连线的点加上"标记"类名二.找出所有的" ...
2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
html5获取图形坐标,WKWebView获取H5页面里图片地址以及图片相对视图窗口的坐标的方法...
最近有个需求是点击放大查看H5内容页面的图片,寻找到一个比较轻量的库YHPhotoBrowser,其中根据图片位置来缩放的动画需要传递一个图片所在屏幕里的位置CGRect,想获取H5的图片坐标那就需要 ...
ios wkweb设置图片_iOS WKWebView识别H5中的图片资源
想获取H5的图片坐标那就需要JS注入了 - (void)handleSingleTap:(UITapGestureRecognizer *)recognizer { CGPoint touchPoin ...

ele.getBoundingClientRect()使用

ele.getBoundingClientRect()使用相关推荐

最新文章

热门文章