offset&client&scroll系列对比图鉴

前言

开发中经常遇到获取元素或文档相关位置、大小属性，不熟悉DOM操作的同学，会经常用混淆，甚至遇到调试这些属性时会一脸茫然，这里我尽量用图解的方式来把他们区分开来。

offset

image.png image.png image.png

client

image.png image.png

scroll

image.png image.png image.png

卷起高度封装

// 获取页面左边卷起距离
export function getScrollLeft() {
  const scrollLeft =
    window.pageXOffset ||
    document.documentElement.scrollLeft ||
    document.body.scrollLeft ||
    0;
  return scrollLeft;
}

// 获取页面顶部卷起距离
export function getScrollTop() {
  const scrollTop =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop ||
    0;
  return scrollTop;
}

// 获取页面左边、顶部卷起距离
export function getScroll() {
  return {
    left: getScrollLeft(),
    top: getScrollTop(),
  };
}

// 以上获取做了浏览器兼容性处理，可直接对外提供使用，同时也可以对外统一使用
export const usePageScroll = ()=> {
  return {
    getScroll,
    getScrollLeft,
    getScrollTop
  }
}

宽度对比

image.png

使用场景

image.png

以上几张图已经涵盖了offset&client&scroll系列的所有常用属性，如果想查官威，直接点击这里，HTMLElement.offsetTop - Web API 接口参考 | MDN (mozilla.org)
或者 JS 中的offset、scroll、client总结 - SegmentFault 思否 ，相信对您有帮助，另外在滚动页面中，还有我们常用的函数，如下：

getBoundingClientRect的使用

// 兼容写法，获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，由于getBoundingClientRect()已经是w3c标准，所以不用担心兼容，不过在ie下还是有所区别
export const getClientBounds = (client): any => {
  const { top, bottom, left, right, height, width } =
    client.getBoundingClientRect();
  return {
    top, // top: '元素顶部相对于视口顶部的距离'
    bottom, // bottom: '元素底部相对于视口顶部的距离'
    left, // left: '元素左边相对于视口左边的距离'
    right, // right: '元素右边相对于视口左边的距离'
    height: height || bottom - top, // height: '元素高度'
    width: width || right - left, // width: '元素宽度'
  };
};

// 获取元素占据页面的所有矩形区域，放大镜效果等才使用
export const getClientRects = (client): any => {
  return client.getClientRects();
};

// 统一对外提供使用
export const useClientReat = ()=> {
  return {
    getClientBounds,
    getClientRects
  }
}

mouseenter 和 mouseover 的区别

image.png

点赞加关注，永远不迷路