获取元素到浏览器顶部的距离

简介: 文章介绍了两种方法来获取页面元素到浏览器顶部的距离:使用元素的`getBoundingClientRect().top`属性和自定义函数`getElementTop`结合`offsetParent`和`offsetTop`属性。

两种方法
1.元素.getBoundingClientRect().top 方法 直接返回该元素到浏览器顶端的距离
2.

        function getElementTop(el) {
   
            if (el.offsetParent ) {
   
                return this.getElementTop(el.offsetParent ) + el.offsetTop
            }
            return el.offsetTop
        }

如果到页面顶部的距离,需要加上document.body.scrollTop的值

目录
相关文章
|
4月前
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
|
2月前
|
JavaScript
js【图解】滚动条的位置(文档与屏幕间的距离),鼠标事件距离(位置),元素距离(位置)
js【图解】滚动条的位置(文档与屏幕间的距离),鼠标事件距离(位置),元素距离(位置)
33 7
|
11月前
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
63 0
selenium--设置浏览器的位置和高度宽度
selenium--设置浏览器的位置和高度宽度
|
JavaScript 测试技术 容器
JQuery 获取元素到浏览器可视窗口边缘的距离
JQuery 获取元素到浏览器可视窗口边缘的距离
125 0
利用offsetTop和scrollTop实现移动端常见的当分类栏移动到顶部时固定位置效果
利用offsetTop和scrollTop实现移动端常见的当分类栏移动到顶部时固定位置效果
184 0
判断DOM元素是否出现再浏览器窗口中
几乎所有的项目都要解决这样一个问题:判断一个元素是否出现在浏览器窗口中?因为通过它我们可以极大的优化项目的性能,进而提升用户的的体验。 使用场景及技术分析 所涉及的业务实现,比较常见的就是电商平台或者是图片展示类的网站。
1443 0