首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

顶部和左侧坐标不适用于getBoundingClientRect() - Javascript

getBoundingClientRect() 是 JavaScript 中一个用于获取元素相对于视口的位置和尺寸信息的方法。这个方法返回一个 DOMRect 对象,包含了元素的位置信息(左上角和右下角的坐标)以及宽度和高度。

在使用 getBoundingClientRect() 方法时,元素的位置是相对于视口(即浏览器窗口)的。因此,顶部和左侧的坐标返回的是元素相对于视口左上角的距离,而不是相对于文档的距离。

这个方法常用于获取元素的位置信息,进行元素的动态定位和碰撞检测等操作。由于返回的是相对于视口的位置信息,所以在滚动页面时,元素的位置信息也会随之变化。

在云计算领域,getBoundingClientRect() 方法一般不会直接应用于云计算相关的问题,因为它更多地与前端开发和页面交互相关。然而,在一些需要处理前端界面元素位置的云计算应用中,可能会用到 getBoundingClientRect() 方法。

腾讯云提供了丰富的云服务和产品,可以帮助开发者构建和管理云计算相关的应用。具体关于腾讯云产品的信息和文档,请参考 腾讯云官方网站

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端实现伸缩框

JS 实现伸缩框 我们的思路是这样子的: 实现右下角的三角拖动图标 计算伸缩框距离左边顶部的距离 监听鼠标的点击、拖动、抬起事件,记录鼠标当前相对视窗左上角点的左侧距离顶部距离 计算鼠标距离边框左侧的距离...,即边框的新宽度 计算鼠标距离边框顶部的距离,即边框的新高度 限定边框的最小距离,防止 icon 拖动隐藏 我们需要跟浏览器的事件打交道,这里引入 RxJS ,(当然,读者可以手写原生 javascript...RxJS 是一个用于处理异步事件流的库。...在开始之前,我们还得熟悉下juejin.cn/post/708512…中的 Element.getBoundingClientRect() 方法: 我们可以通过这个方法获取元素其左上角顶点相对可视窗口的坐标...当然,我们还需要通过 event.clienX event.clientY 获取当前鼠标距离可视窗口的坐标(clientX, clientY)。

25010

JavaScript与jQuery获取元素的宽、高位置

今天汇总整理了 JavaScript jQuery 获取元素宽高位置的方法,比较全面,方便自己需要并搜到此文章的朋友们查看。...()); JavaScript中: 获取坐标 getBoundingClientRect() :获取元素相对于浏览器视口的的坐标,返回一个Object对象,有6个属性:top |...,不包括外边距) offsetWidth :元素的宽度(包括边框内边距,不包括外边距) 偏移值 offsetLeft :元素的相对水平偏移位置(左边界距离可视区域最左侧的距离) offsetParent...元素的位置偏移量 offset() :返回包含 top left 两个属性的对象,相对于 document 文档的坐标。...$(document).scrollTop() :document 元素相对 document 元素对应的滚动条顶部的垂直偏移量,可获取已滚动的距离或设置将要滚动的距离。

3K00
  • 再谈BOMDOM(6):dom对象及event对象位值计算—如offsetXTop,clentX

    总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀。。。。)...event对象位置信息获取 先总结下区别: event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏滚动条。...IE事件标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。...因为滚动条不会出现在顶部或者左侧 offset 指偏移,包括这个元素在文档中占用的所有显示宽度。比client 多了border。     ...    scrollTop  设置或获取位于对象最顶端窗口中可见内容的最顶端之间的距离 js中getBoundingClientRect 当滚动位置发生了改变,topleft属性值就会随之立即发生变化

    1.5K20

    clientWidth,offsetWidth,scrollWidth你分的清吗

    相等 scrollTop 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。...getBoundingClientRect() 它返回一个对象,其中包含了left、right、top、bottom四个属性,分别对应了该元素的左上角右下角相对于浏览器窗口(viewport)左上角的距离...但是滚动元素是从可视区域的左上角右下角开始计算,如果想获取滚动元素整体的坐标,需要加上滚动距离  var X = node.getBoundingClientRect().left+node.scrollLeft...} = this.pRef[`ref${value}`].getBoundingClientRect(); // needScroll就是元素底部距离滚动容器顶部的距离,再减去20像素,保证出现在视口中间...希望能对你有用,当然,如果可以,笔者也希望你能点个赞再走呢 参考链接 https://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html

    2K10

    Web前端实现锚点功能的三种方式

    默认为 "start",元素顶部将滚动到视窗顶部; 取值 "end",元素底部将视窗底部对齐; 取值 "center",元素中线将视窗中间对齐; 取值 "nearest",元素将就近对齐。...三、scrollTo/scrollBy window.scrollTo 可将视窗滚动到指定的坐标。...用法如: window.scrollTo(xpos, ypos); window.scrollBy 可将视窗向上下或左右移动指定坐标的距离。...Element.getBoundingClientRect 的返回值包含 top、left、bottom、right、width height 六个属性,除了 width height 以外的属性均是相对于视窗的左上角来计算的...(); // 滚动 div#root 元素顶部到与视窗顶部对齐 window.scrollTo(domScrollLeft, domScrollTop + targetOffsetTop); window.scrollBy

    3.5K31

    【汉诺塔】小游戏开发教程

    绑定事件需要注意的是按下事件绑定到圆环上,而移动松开事件要绑定到body上,否则当你移动过快时鼠标指针可能会圆环不同步而超出圆环,进而当你松开后就监听不到松开事件了。...因为涉及到位置计算,所以需要获取实际的DOM元素,先在模板里加上ref用于引用DOM: <div class="column...: 1.圆环的右侧距窗口<em>左侧</em>的距离大于柱子区域<em>左侧</em>距窗口<em>左侧</em>的距离、同时圆环<em>左侧</em>距窗口的距离小于柱子区域右侧距窗口<em>左侧</em>的距离 2.圆环的<em>顶部</em>距窗口<em>顶部</em>的距离小于柱子区域的底部距窗口<em>顶部</em>的距离、同时圆环的底部距窗口<em>顶部</em>的距离大于柱子区域<em>顶部</em>距窗口<em>顶部</em>的距离...$refs['ring' + order][0].<em>getBoundingClientRect</em>() // 遍历获取柱子区域相当于浏览器窗口的位置信息 ;[0, 1, 2]....$refs['column' + index][0].<em>getBoundingClientRect</em>() // 重合检查 if (

    1.9K10

    Web浏览器滚动方案一览| rAF等

    通过合理选择应用这些滚动方案,我们可以提供更加流畅优化的用户体验。Window 大小与文档大小要获取窗口大小和文档大小,我们可以使用JavaScript编程语言。...alert('当前已从顶部滚动:' + window.pageYOffset);alert('当前已从左侧滚动:' + window.pageXOffset);这些属性是只读的。...基于浏览器API的滚动方法scrollToscrollTo 方法用于将页面或元素滚动到指定位置。它接收两个参数,第一个参数是横坐标,第二个参数是纵坐标。...例如:window.scrollTo({ top: 100, behavior: 'smooth'});scrollTo 方法对整个页面单个元素都起作用,常用于点击某个按钮后滚动到页面指定位置,或者滚动元素内部内容...它有一个参数alignToTop:如果 top=true(默认值),页面滚动,使 elem 出现在窗口顶部。元素的上边缘将与窗口顶部对齐。

    15010

    彻底玩转图片懒加载及底层实现原理

    “图片来源Seven's Blog 思路分析 通过上面三个 API,我们获得了三个值:可视区域的高度、元素相对于其父元素容器顶部的距离、浏览器窗口顶部与容器元素顶部的距离也就是滚动条滚动的高度。...()实现图片懒加载 先来了解一下这个API吧: getBoundingClientRect()用于获得页面中某个元素的左,上,右下分别相对浏览器视窗的位置。...是元素自身的宽高,但是right,bottomcss中的理解有点不一样。...传统的实现方法是,监听到scroll事件后,调用目标元素(绿色方块)的getBoundingClientRect()方法,得到它对应于视口左上角的坐标,再判断是否在视口之内。...Element/clientHeight [2] 阮一峰博客: http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html

    93731

    获取图片的位置(距离最顶部

    变化,这样就有很多问题, 所以就需要根据图片的当前位置(元素距离顶部的位置(包括滚动条),左边的位置)来动态的添加这个按钮 因为是hover触发的 所以这个按钮只有一个 (这样的做法是参考阿里以图搜图的功能做的...) ok 需求明白了之后 开始说怎么做 先说公式代码:( top: 图片距离顶部的高度+滚动条的高度,left:图片距离左侧的高度) 1.滚动条的高度     // 获取 当前 滚动条的长度, 水平 ...document.body           ).scrollTop;         }         return { x, y };       } 2.图片距离上、左的距离:(主要方法:dom.getBoundingClientRect...)       // 获取 dom 到视口左侧顶部的相对位置       function getDomToViewPosition(id) {         var dom = document.getElementById...(id);         let rectObject = dom.getBoundingClientRect();         return {           domToViewLeft:

    2K10

    【实例】调整区域大小&动态隐藏区域

    设置或获取鼠标指针位置相对于触发事件的对象的X、Y坐标 2 pageX、pageY (只读)相对于整个文档的X、Y坐标以像素为单位的只读属性(包括滚动条) 74+106+3+300-5+2=480 screenX...这个接口描述了所有相同种类的元素所普遍具有的方法属性。 这些继承自Element并且增加了一些额外功能的接口描述了具体的行为....该元素距离它左边界的宽度、宽度 0 scrollHeight、scrollWidth (只读,整数)包括由于溢出导致的视图中不可见内容 300 scrollLeft、scrollTop 读取或设置元素滚动条到元素左边、顶部的距离...clientHeight:可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算 - scrollHeight:返回整数,如果需要小数使用 Element.getBoundingClientRect...只读,整数)该元素自身可视高度、宽度加上上下border的宽度 300 offsetLeft、offsetTop 该元素左上角相对于 HTMLElement.offsetParent 节点的左边界、顶部偏移的像素值

    1.7K21

    详细设计一个文章页目录插件

    首先需要根据文章内容的二级三级标题生成目录; 然后,页面从上到下滚动过程中,需要在右侧目录里高亮当前的标题,而高亮的原则是当前标题所在的位置到浏览器可视区域顶部的距离需要小于或等于一个固定值,如上图所示...-- 这里是部分文章内容 --> ` document.getElementById('arAnchorBar').innerHTML = retStr } 设置滚动监听事件 给 window 加上滚动事件,用于监听当滚动的时候去做一些操作...,这里的操作就是设置高亮滚动目录。...这部分内容开始前,我们先来复习一个 API,该方法会返回元素的大小及其相对于视口的位置: Element.getBoundingClientRect() 需求分析的时候有提到,高亮的原则是当前标题所在的位置到浏览器可视区域顶部的距离需要小于或等于一个固定值

    2.4K20

    底部悬浮框 上拉下拉功能

    实现一个通过触摸拖动操作来展开收起底部悬浮框,并根据拖动过程中的位置状态来调整底部容器的高度展开状态的功能 <!...2:定义了一些变量用于记录拖动过程中的状态位置,包括startY(起始Y坐标)、currentY(当前Y坐标)、isDragging(是否正在拖动)、isExpanded(悬浮框是否展开)、floatingBoxHeight...3:添加touchstart事件监听器,当触摸开始时,记录起始Y坐标、当前Y坐标,并将isDragging标志设置为true。同时,通过e.preventDefault()阻止默认的拖动行为。...5:悬浮框与窗口底部的距离悬浮框与页面顶部的距离,判断是否需要展开或收起底部容器。...如果悬浮框与页面顶部的距离小于等于0,则将底部容器的高度设置为窗口高度减去悬浮框与顶部容器之间的距离,并将isExpandedisDragging标志设置为false。

    20840

    偏移量、客户区大小、视口大小、滚动大小、确定元素大小

    其中,offsetLeftoffsetTop属性与包含元素有关,包含元素的引用保存在offsetParent属性中。...(上面两者主要是用于确定内容的实际大小) scrollLeft:被隐藏在内容区域左侧的像素数。 scrollTop:被隐藏在内容区域上方的像素数。...(上面两者既可以确定元素当前滚动的状态,也可以设置元素的滚动位置) 5、确定元素的大小 getBoundingClientRect( )方法,这个方法会返回一个矩形对象,包含4个属性left、top、...rightbottom,给出了元素在页面中相对于视口的位置 ①由于ie8及更早版本认为文档的左上角坐标是(2,2),而其他浏览器包括ie9则将(0,0)作为起点坐标,所以用函数使用它自身的属性来确定是否要对坐标进行调整...; var scrollLeft=document.documentElement.scrollLeft; if(element.getBoundingClientRect){

    1.5K20

    js获取元素到文档区域document的(横向、纵向)坐标的两种方法

    (如果存在)的offsetLeft/offsetTop属性来实现 在阅读javascript高级程序设计第三版DOM部分时,了解到要获取某个元素在页面上的偏移量,需要将这个元素的offsetLeft...二:通过 getBoundingClientRect() 方法实现 getBoundingClientRect方法用于获得页面中某个元素的左,上,右下分别相对浏览器视窗window的位置。...js代码: // 获取元素到文档区域的坐标 function getPosition(element){ var dc = document, rec = element.getBoundingClientRect...结语:上文已对如何获取元素相对于文档区域document的坐标位置做出了阐述,如遇到相关问题,可联系本人或直接发表评论,另外,对于右坐标right以及下坐标bottom的获取只需把left、top坐标的大小元素本身的宽度...(elem.offsetWidth)以及高度(elem.offsetHeight)相加即可,当然offsetWidth、offsetHeight属性会计算元素的内边距、边框,所以最好的办法还是通过getBoundingClientRect

    2.6K30

    【动画进阶】神奇的 3D 卡片反光闪烁动效

    旋转跟随鼠标移动效果 如何让卡片在 Hover 状态,有不同的光泽变化 如何让卡片在 Hover 状态,有 Blink,Blink 的星星闪烁效果 当然,要做到卡片的 3D 旋转跟随鼠标移动效果需要一定程度的借助 JavaScript...,因此,最终的效果是 CSS 配合 JavaScript 以及一些动态效果的 Gif 共同实现。...首先看 X 方向上的移动: 这里,我们需要以元素的中心为界: 当鼠标在中心右侧连续移动,元素绕 Y 轴移动,并且值从 0 开始,越来越大,范围为(0, +∞)deg 反之,当鼠标在中心左侧连续移动,元素绕...Y 轴移动,并且值从 0 开始,越来越小,范围为(-∞, 0)deg 这样,我们可以得到这样一个公式: rotateY = (鼠标 x 坐标 - 元素左上角 x 坐标 - 元素宽度的一半)deg 通过绑定...我们通过计算当前鼠标距离卡片左侧的横向距离,除以卡片整体的宽度,得到 --per 实际表示的百分比,再赋值给 --per,以此实现 Hover 时候的光效变化: 叠加星星闪烁效果 好,效果已经非常接近了

    30820
    领券