美文网首页Web前端之路
javascript dom元素位置相关方法

javascript dom元素位置相关方法

作者: EdmundChen | 来源:发表于2017-01-12 15:43 被阅读40次

    获取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 // 元素在当前屏上面
    
    

    相关文章

      网友评论

        本文标题:javascript dom元素位置相关方法

        本文链接:https://www.haomeiwen.com/subject/plodbttx.html