如何获得包含在getBoundingClientRect顶部和底部的精确偏移量？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

图解浏览器的各种距离

比如 OnBoarding 组件，我们要拿到每一步的高亮元素的位置、宽高：比如 Popover 组件，需要拿到每个元素的位置，然后确定浮层位置：比如滚动到页面底部，触发列表的加载，这需要拿到滚动的距离和页面的高度...首先，页面一般都是超过一屏的，右边会出现滚动条，代表当前可视区域的位置：这里窗口的部分是可视区域，也叫做视口 viewport。如果我们点击了可视区域内的一个元素，如何拿到位置信息呢？...返回的数值是更精确的小数，所以算出来的也是小数。...这里 clientY 和 getBoundingClientRect().top 也要区分下：一个是元素距离可视区域顶部的距离，一个是鼠标事件触发位置到可视区域顶部的距离。...所以，对于滚动到页面底部的判断，就可以用 window.scrollY + window.innerHeight 和 document.documentElement.scrollHeight 对比。

6381 0

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

首先需要根据文章内容的二级和三级标题生成目录；然后，页面从上到下滚动过程中，需要在右侧目录里高亮当前的标题，而高亮的原则是当前标题所在的位置到浏览器可视区域顶部的距离需要小于或等于一个固定值，如上图所示...随着页面的滚动，目录将从头滚到尾，那么滚动的范围是从第一个子目录贴着滚动区域的顶部到最后一个子目录贴着滚动区域的底部为止；当页面在最顶部的时候，当前高亮的子目录肯定是第一个，随着页面的向下滚动，高亮的位置也在不断下移...首先我们要判断当前滚动是向上还是向下滚动，可以根据两次滚动前后的偏移量来判断：向上滚动 = 滚动后偏移量偏移量 let lastSH = window.pageYOffset // 获取最近一次页面的滚动方向...很多文章页很长，所以有回到顶部这种功能，试想一下，如果当前页面已经滚动到最底部，这个时候来一下回到顶部，那刚刚写的优化代码会遍历几次？答案是：遍历次数将会是目录子项的总数。...，即中位线以下，此时目录的滚动距离将是滚动后高亮子目录的底部位置到中位线的高度差，如上图 ②；滚动后的高亮目录处于中位线以下且最后一个子目录需要贴着滚动区域底部，此时目录的滚动距离将是滚动列表底部到滚动区域底部的高度差

2.7K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

【前端词典】4 （+1）种滚动吸顶实现方式的比较

offsetTop 用于获得当前元素到定位父级（ element.offsetParent ）顶部的距离（偏移值）。...三、使用原生的 offsetTop 实现我们知道 offsetTop 是相对定位父级的偏移量，倘若需要滚动吸顶的元素出现定位父级元素，那么 offsetTop 获取的就不是元素距离页面顶部的距离。...some code } } } offsetTop 和 getBoundingClientRect() 区别 1. getBoundingClientRect(): 用于获得页面中某个元素的左...2. offsetTop: 用于获得当前元素到定位父级（ element.offsetParent ）顶部的距离（偏移值）。...offsetTop 和 offsetParent 方法相结合可以获得该元素到 body 上边距的距离。

2.6K3 0

【前端词典】4 种滚动吸顶实现方式的比较

offsetTop 用于获得当前元素到定位父级（ element.offsetParent ）顶部的距离（偏移值）。...2、如何使用？...三、使用原生的 offsetTop 实现我们知道 offsetTop 是相对定位父级的偏移量，倘若需要滚动吸顶的元素出现定位父级元素，那么 offsetTop 获取的就不是元素距离页面顶部的距离。...some code } } } offsetTop 和 getBoundingClientRect() 区别 1. getBoundingClientRect(): 用于获得页面中某个元素的左...offsetTop 和 offsetParent 方法相结合可以获得该元素到 body 上边距的距离。

3.1K6 0

native 嵌套H5弹出虚拟键盘遮挡界面及其input 文本框上提及其置顶显示

以下代码用于直接将文档流中的元素移动到视区内，Android5.0+有效(只测了5.0和5.1，其他未知)，IOS没测过。...在resize事件中，获得浏览器可视区域的top和bottom。...获得浏览器可视区域的位置： var viewTop = $(window).scrollTop(), // 可视区域顶部 // 可视区域底部 // 不使用jQuery var viewTop = document.body.scrollTop..., viewBottom = viewTop + window.innerHeight; 获得元素的在文档中的位置： var elementTop = $element.offset().top..., // $element是保存的input elementBottom = elementTop + $element.height(); // 不使用jQuery /* 获得元素的位置信息

1.4K2 0

一文彻底搞懂js中的位置计算

元素的 offsetLeft/offsetTop 的值等于它的左边框左侧/顶边框顶部到它的 offsetParent 元素左边框的距离。...我们来看看这张图: 计算元素距离 body 的偏移量当我们需要获得元素距离 body 的距离时，但是又无法确定父元素是否存在定位元素时(大多数时候在组件开发中，并不清楚父节点是否存在定位)。...此时需要实现类似 jqery 的 offset()方法：获得当前元素对于 body 的偏移量。无法直接使用 offsetLeft/offsetTop 获取，因为并不确定父元素是否存在定位元素。...element.getBoundingClientRect()返回的 height 和 width 是针对元素可见区域的宽和高(具体尺寸根据 box-sizing 决定)，并不包含滚动条被隐藏的内容。...如果你需要获得相对于整个网页左上角定位的属性值，那么只要给 top、left 属性值加上当前的滚动位置（通过 window.scrollX 和 window.scrollY），这样就可以获取与当前的滚动位置无关的值

5.1K1 0

面试官问：如何判断一个元素是否在可视区域？

面试官问：如何判断一个元素是否在可视区域？最近在参加面试找工作，陆陆续续的面了两三家。其中一个面试官问到了一个问题：如何判断一个元素是否在可视区域？...HTMLElement.offsetTop HTMLElement.offsetTop返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。...就是距离可视窗口的偏移量。...DOMRect 可以理解为将元素看出一个矩形，该对象包含了该矩形的位置、大小信息，可以获得页面中元素的左，上，右和下分别相对浏览器视窗的位置。...「列表的无限滚动」无限滚动时，最好在页面底部有一个页尾栏。一旦页尾栏可见，就表示用户到达了页面底部，从而加载新的条目放在页尾栏前面。

3.9K2 2

【JS】687- 几行代码摸清楚上拉加载原理

接下来看看js方面的实现，其实也很简单，触发的条件是：可视高度 + 滚动距离 >= 实际高度。例子我会使用vue来实现，和原生实现是一样的。...可视高度(offsetHeight)：通过 dom 的 offsetHeight 获得，表示区域固定的高度。...滚动高度(scrollTop)：滚动事件中通过 e.target.scrollTop 获取，表示滚动条距离顶部的px 实际高度(scrollHeight)：通过 dom 的 scrollHeight 获得...如果你做过小程序，这和onReachBottom差不多的意思。...this.isReachBottom = true console.log('触底') } } } } 实现到这里就告一段落，如果你有更好的思路和值得改进的地方

1.7K4 1

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

默认为 "start"，元素顶部将滚动到视窗顶部；取值 "end"，元素底部将和视窗底部对齐；取值 "center"，元素中线将和视窗中间对齐；取值 "nearest"，元素将就近对齐。...即，若页面向上滚动，则顶部对齐；若页面向下滚动，则底部对齐。 inline，定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。...用法如： window.scrollBy(xnum, ynum); 这种方式还需要实用 Element.getBoundingClientRect 来获取元素的大小及相对于当前视窗的位置。...Element.getBoundingClientRect 的返回值包含 top、left、bottom、right、width 和 height 六个属性，除了 width 和 height 以外的属性均是相对于视窗的左上角来计算的...(); // 滚动 div#root 元素顶部到与视窗顶部对齐 window.scrollTo(domScrollLeft, domScrollTop + targetOffsetTop); window.scrollBy

4.5K3 1

如何用JavaScript获取网页文档高度？

为了实现这些功能，准确获取整个网页文档的高度是关键的一步。今天，我们就结合一个实际业务场景，来看一下如何用JavaScript获取整个文档的高度。...场景介绍假设你在开发一个电商网站，需要在用户滚动到底部时自动加载更多商品。为了实现这个功能，我们需要精确地获取当前网页的高度，并判断用户是否已经滚动到页面底部。...方法二：使用getBoundingClientRect方法在某些情况下，比如需要获取元素的精确位置和尺寸时，可以使用getBoundingClientRect方法。...，了解了如何用JavaScript获取整个文档的高度。...不论是通过scrollHeight、offsetHeight和clientHeight组合，还是使用getBoundingClientRect方法，都能帮助我们在实际开发中实现动态加载和布局调整的功能。

1.2K0 0

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

今天汇总整理了 JavaScript 和 jQuery 获取元素宽高和位置的方法，比较全面，方便自己和需要并搜到此文章的朋友们查看。...元素的位置偏移量 offset() ：返回包含 top 和 left 两个属性的对象，相对于 document 文档的坐标。...)和边框(border)的元素宽度 outerHeight() ：获得包括内边距(padding)和边框(border)的元素宽度 outerWidth(true) ：获得整个元素的宽度，包括外边距、边框...、内边距和内容 outerHeight(true) ：获得整个元素的高度，包括外边距、边框、内边距和内容注意： 1）ele.css("height") ：返回带有完整单位的字符串（例如400px），若运算需要...$(document).scrollTop() ：document 元素相对 document 元素对应的滚动条顶部的垂直偏移量，可获取已滚动的距离或设置将要滚动的距离。

4.6K0 1

页面中元素的吸顶

[需求] 滚动页面到顶部，实现某元素固定到顶部效果点击某个按钮，页面滚动到相应的位置滚动页面，当到达某个位置时，高亮对应的相关按钮 [元素吸顶实现方式] 关于元素吸顶效果，通过查阅相关资料和相关测试...粘性定位元素相当于position:relative和position:sticky的结合体，受限于父级元素，在不同的条件下呈现出不同的页面效果 [2. 如何使用sticky？]...元素的顶部内边距的距离。...因此我们需要注意的是，在监听页面滚动的过程中，需要将定位父级元素的偏移量也计算在内，可以如下写法： //获取当前元素的offsetTop getOffsetTop(obj) {...] 还有一种更为直接的方式，可以实现吸顶效果，就是使用getBoundingClientRect().top来获取元素相对于视口（浏览器窗口）的位置，相对于offsetTop，该方法不用考虑到吸顶元素的父级元素和页面滚动条的高度

1.7K3 0

底部悬浮框上拉和下拉功能

实现一个通过触摸拖动操作来展开和收起底部悬浮框，并根据拖动过程中的位置和状态来调整底部容器的高度和展开状态的功能的高度）和originalHeight（底部容器的初始高度）。...5：悬浮框与窗口底部的距离和悬浮框与页面顶部的距离，判断是否需要展开或收起底部容器。...如果悬浮框与页面顶部的距离小于等于0，则将底部容器的高度设置为窗口高度减去悬浮框与顶部容器之间的距离，并将isExpanded和isDragging标志设置为false。...根据底部容器的高度和展开状态，添加或移除.open类，以控制底部容器的展开和收起。

6404 0

clientWidth，offsetWidth，scrollWidth你分的清吗

，这个只针对dom的子元素出现溢出情况时，才有效果，不然它始终和clientHeight相等 scrollTop 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。...getBoundingClientRect() 它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离...但是滚动元素是从可视区域的左上角和右下角开始计算，如果想获取滚动元素整体的坐标，需要加上滚动距离　var X = node.getBoundingClientRect().left+node.scrollLeft...const containerHeight = this.scrollRef.clientHeight; // 滚动视口距离浏览器顶部的距离 const containerOffsetTop = this.scrollRef.getBoundingClientRect...就是元素底部距离滚动容器顶部的距离，再减去20像素，保证出现在视口中间 const needScroll = top - containerOffsetTop - 20; if (needScroll

3.1K1 0

3分钟搞定图片懒加载

如何判断一个元素是否在视口内呢？通过getBoundingClientRect()方法来获取元素的大小以及位置。...随着滚动条的向下滚动，bound.top会越来越小，也就是图片到可视区域顶部的距离越来越小，当bound.top 的上沿应该是位于可视区域下沿的位置的临界点，再滚动一点点...注意：一定要设置图片的高度。提示：src的赋值在js原生和jq是不同的，混用的话不会生效。...判断是否滚动到最底部的方法：滚动条到顶部距离 + 可视页面高度 >= 当前页面高度 var seeHeight = document.documentElement.clientHeight; // 可视页面高度...当滚动到20张图的底部的时候，就会发出ajax请求，请求下一页数据。 ? 至此本文完，有疑问可以在评论区随时交流哈。

3K2 0

动手练一练，手写一个价格对比、固定表头滚动的表格

今天我们将通过一个界面十分漂亮功能价格对比的表格，展示固定表头的功能，实例操作展示如视频所示，当滚动条滚动至表格位置，添加表头固定样式，当滚动至表格底部，移除固定表头样式。...offsetTop:当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。...用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。...获取表格的 offsetWidth 宽度获取表格距离视口顶部的距离（getBoundingClientRect().top）获取表头的 offsetHeight 高度基于这些我们定义相关的变量，...获取用户从视口顶部滚动的距离（pageYOffset）获取最后一部分内容区域距离窗口顶部的高度（getBoundingClientRect().top）检测滚动条是否滚动到表格区域。

4.1K3 1

【JS】322- 手把手教你实现前端惰性加载

计算：可视区域的高度（offsetHeight） + 滚动条卷去的高度（scrollTop） >= 元素相对于外框的距离(offsetTop) - 偏移量（提前加载） ?...除了 width和 height外的属性都是相对于视口的左上角位置而言的。 ?...这种条件下，假设 bound=el.getBoundingClientRect()，随着滚动条的向下滚动，bound.top会越来越小，也就是图片到可视区域顶部的距离越来越小，当 bound.top==...当数据达到一定量的时候，事件绑定和循环位置计算会消耗大量的性能，每次调用 getBoundingClientRect() 都会强制浏览器重新计算整个页面的布局，可能给你的网站造成相当大的闪烁。...在页面底部有一个loading状态标签。一旦标签可见，就表示用户到达了页面底部，从而加载新的条目放在标签的前面。

1.4K3 0

React项目中如何实现一个简单的锚点目录定位

前言锚点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节如何在React中实现锚点定位和平滑滚动目录自动高亮的实现思路处理顶部导航遮挡锚点的解决方案服务端渲染下的实现方案...自动高亮实现自动高亮也很简单,通过监听滚动事件,计算章节元素的偏移量,判断哪个章节在可视区域内,并更新active状态: function App() { const [activeChapter...const scrollOffset = -80; chapterEl.scrollIntoView({ offsetTop: scrollOffset }) 给scrollIntoView传入一个顶部偏移量...在使用了服务端渲染(SSR)的框架如Next.js等情况下,实现锚点定位和目录联动也会有一些不同。...主要区别在于: 服务端和客户端环境不统一脚本加载时间差这会导致一些状态错位的问题。

3K2 0

「实用推荐」如何优雅的判断元素是否进入当前视区

export const isVisible = (el) => { }; 使用 getBoundingClientRect 获取该元素的位置 const rect = el.getBoundingClientRect...因为每次调用 getBoundingClientRect 都会强制浏览器重新计算整个页面的布局，可能给你的网站造成相当大的闪烁。...threshold: [0], }); 有一点要注意：IntersectionObserver 不是完美精确到像素级别，也不是低延时性的。使用它实现类似依赖滚动效果的动画注定会失败。...一旦页尾栏可见，就表示用户到达了页面底部，从而加载新的条目放在页尾栏前面。...实用 Npm 包推荐和今天话题相关的npm 包推荐的是：react-visibility-sensor 地址：https://www.npmjs.com/package/react-visibility-sensor

2K2 0

如何渲染几万条数据并不卡住界面

所以使用transform矫正由于三屏所导致的偏移量。...每项高度未知高度虽然不定，但是我们能通过getBoundingClientRect方法在页面渲染后去获取节点的真实高度。...问题就变得简单了，需要预先使用一个变量存储所有列表的高度height、节点顶部距离顶部的位置top、节点底部距离顶部的位置bottom mounted() { // ......scrollTop值大概率和列表中的top/bottom不相等，所以我们期望去找到一个区间且最接近的值。...this.positions[this.start - this.prevCount].top : 0 } } 找到开始的位置，进而可知结束位置以及矫正偏移量。

8981 0

点击加载更多

图解浏览器的各种距离

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

【前端词典】4 （+1）种滚动吸顶实现方式的比较

【前端词典】4 种滚动吸顶实现方式的比较

native 嵌套H5弹出虚拟键盘遮挡界面及其input 文本框上提及其置顶显示

一文彻底搞懂js中的位置计算

面试官问：如何判断一个元素是否在可视区域？

【JS】687- 几行代码摸清楚上拉加载原理

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

如何用JavaScript获取网页文档高度？

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

页面中元素的吸顶

底部悬浮框上拉和下拉功能

clientWidth，offsetWidth，scrollWidth你分的清吗

3分钟搞定图片懒加载

动手练一练，手写一个价格对比、固定表头滚动的表格

【JS】322- 手把手教你实现前端惰性加载

React项目中如何实现一个简单的锚点目录定位

「实用推荐」如何优雅的判断元素是否进入当前视区

如何渲染几万条数据并不卡住界面

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐