javascript dom元素位置相关方法

获取dom元素的位置

function offset(el) {
  const rect = el.getBoundingClientRect();
  return {
    top: rect.top + document.body.scrollTop,
    left: rect.left + document.body.scrollLeft,
  };
}

获取viewport的高度,宽度

浏览器窗口的视口(viewport)高度(以像素为单位),如果存在水平滚动条,

Window.innerHeight
window.innerWidth

判断一个dom元素是否在viewport内

ele.getBoundingClientRect().top > window.innerHeight // 元素在当前屏下面

ele.getBoundingClientRect().bottom < 0 // 元素在当前屏上面

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,114评论 1 92
  • 原文地址 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewp...
    matthewm阅读 1,601评论 0 4
  • 还有3个月,宝贝就2岁了,我急需知道2岁的孩子发展规律是什么。在他2岁到3岁的这一年里,父母应该在他的成长之路上扮...
    用户不在线阅读 185评论 0 1
  • 当快乐到来时,我就不再思考人生 当寂寞来临时,我就低头努力读书 ———出自网易云音乐《Variations on ...
    阳雨儿阅读 179评论 0 0
  • 严格意义上讲,这是我读的第一本外国文学作品《解忧杂货店》。学生时代不愿意看国外文学作品原因之一是觉得文化差异,...
    杨小堃阅读 1,124评论 8 4

友情链接更多精彩内容