图解网页的各种距离-祁东璟辰科技有限公司

网页开发中，我们经常要计算各种距离。

比如 OnBoarding 组件，我们要拿到每一步的高亮元素的位置、宽高：

比如 Popover 组件，需要拿到每个元素的位置，然后确定浮层位置：

比如滚动到页面底部，触发列表的加载，这需要拿到滚动的距离和页面的高度。

类似这样，需要计算距离、宽高等的场景有很多。

而浏览器里与距离、宽高有关的属性也有不少。

今天我们来整体过一遍。

首先，页面一般都是超过一屏的，右边会出现滚动条，代表当前可视区域的位置：

这里窗口的部分是可视区域，也叫做视口 viewport。

如果我们点击了可视区域内的一个元素，如何拿到位置信息呢？

我们只看 y 轴方向好了，x 轴也是一样的。

事件对象可以拿到 pageY、clientY、offsetY，分别代表到点击的位置到文档顶部，到可视区域顶部，到触发事件的元素顶部的距离。

还有个 screenY，是拿到到屏幕顶部的距离。

我们试一下：




lua复制代码

npx create-vite

去掉 main.tsx 的里 index.css 和 StrictMode：

然后改下 App.tsx




javascript复制代码

import { MouseEventHandler, useEffect, useRef } from 'react'

function App() {
  const ref = useRef<HTMLDivElement>(null);

  const clickHandler: MouseEventHandler<HTMLDivElement> = (e) => {
    console.log('box pageY', e.pageY);
    console.log('box clientY', e.clientY)
    console.log('box offsetY', e.offsetY);
    console.log('box screenY', e.screenY);
  }

  useEffect(() => {
    document.getElementById('box')!.addEventListener('click', (e) => {
      console.log('box2 pageY', e.pageY);
      console.log('box2 clientY', e.clientY)
      console.log('box2 offsetY', e.offsetY);
      console.log('box2 screenY', e.screenY);
    });
  }, []);

  return (
    <div>
      <div id="box" ref={ref} style={{
        marginTop: '800px',
        width: '100px',
        height: '100px',
        background: 'blue'
      }} onClick={clickHandler}></div>
    </div>
  )
}

export default App

为什么要用两种方式添加点击事件呢？

因为这里要介绍一个 react 事件的坑点：

react 事件是合成事件，所以它少了一些原生事件的属性，比如这里的 offsetY，也就是点击的位置距离触发事件的元素顶部的距离。

你写代码的时候 ts 就报错了：

那咋办呢？

react-use 提供的 useMouse 的 hook 就解决了这个问题：

它是用 e.pageY 减去 getBoundingClientRect().top 减去 window.pageYOffset 算出来的。

这里的 getBoundingClientRect 是返回元素距离可以可视区域的距离和宽高的：

而 window.pageYOffset 也叫 window.scrollY，顾名思义就是窗口滚动的距离。

想一下，pageY 去了 window.scrollY，去了 getBoundingClientRect().top，剩下的可不就是 offsetY 么：

试一下：




javascript复制代码

const clickHandler: MouseEventHandler<HTMLDivElement> = (e) => {
    const top = document.getElementById('box')!.getBoundingClientRect().top;

    console.log('box pageY', e.pageY);
    console.log('box clientY', e.clientY)
    console.log('box offsetY', e.pageY - top - window.pageYOffset);
    console.log('box screenY', e.screenY);
}

因为 getBoundingClientRect 返回的数值是更精确的小数，所以算出来的也是小数。

还有，这里的 window.pageYOffset 过时了，简易换成 window.scrollY，是一样的：

当然，你也可以访问原生事件对象，拿到 offsetY 属性：

此外，窗口的滚动距离用 window.scrollY 获取，那元素也有滚动条呢？

元素内容的滚动距离用 element.scrollTop 获取。




javascript复制代码

import { MouseEventHandler, useEffect, useRef } from 'react'

function App() {
  const ref = useRef<HTMLDivElement>(null);

  const clickHandler: MouseEventHandler<HTMLDivElement> = (e) => {
    console.log(ref.current?.scrollTop);
  }

  return (
    <div>
      <div id="box" ref={ref} style={{
        marginTop: '800px',
        width: '100px',
        height: '100px',
        background: 'ping',
        overflow: 'auto'
      }} onClick={clickHandler}>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
      </div>
    </div>
  )
}

export default App

给 box 加一些内容，设置 overflow:auto。

试一下：

这就是元素的 scrollTop。

此外，元素还有 offsetTop 和 clientTop 属性：




javascript复制代码

import { useEffect, useRef } from 'react'

function App() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    console.log('offsetTop', ref.current?.offsetTop);
    console.log('clientTop', ref.current?.clientTop);
  }, []);

  return (
    <div>
      <div style={
        {
          position: 'relative',
          margin: '100px',
          padding: '200px',
          border: '1px solid blue'
        }
      }>
        <div id="box" ref={ref} style={{
          border: '20px solid #000',
          width: '100px',
          height: '100px',
          background: 'pink',
        }}>
        </div>
      </div>
    </div>
  )
}

export default App

box 外层添加一个 div，margin 为 100px，padding 为 200px。

可以看到，clientTop 也就是上边框的高度 20px。

offsetTop 是距离最近的有 position 属性（relative 或 absolute 或 fixed）的元素的距离。

所以是 200px。

注释掉就是 301px 了，这时候就是相对于文档顶部，所以是 200px padding+ 1px border + 100px margin。

offsetTop 相对于哪个元素，那个元素就是 offsetParent。

还可以递归累加到 offsetParent 的 offsetTop，直到 offsetParent 为 null，也就是到了根元素，这时候算出来的就是元素到根元素的 offsetTop：




javascript复制代码

import { useEffect, useRef } from 'react'

function App() {
  const ref = useRef<HTMLDivElement>(null);

  function getTotalOffsetTop(element: HTMLElement) {
    let totalOffsetTop =0;
    while (element) {
      totalOffsetTop += element.offsetTop;
      element = element.offsetParent as HTMLElement;
    }
    return totalOffsetTop;
  }

  useEffect(() => {
    console.log('offsetTop', ref.current?.offsetTop);
    console.log('clientTop', ref.current?.clientTop);

    console.log('totol offsetTop', getTotalOffsetTop(ref.current!))
      
  }, []);

  return (
    <div>
      <div style={
        {
          position: 'relative',
          margin: '100px',
          padding: '200px',
          border: '1px solid blue'
        }
      }>
        <div id="box" ref={ref} style={{
          border: '20px solid #000',
          width: '100px',
          height: '100px',
          background: 'pink',
        }}>
        </div>
      </div>
    </div>
  )
}

export default App

但是你会发现它少计算了 border 的宽度：

因为 offsetTop 元素顶部到 offsetParent 内容部分的距离，不包括 border。

这时候加上 clientTop 就可以了，它就是上边框的高度。




javascript复制代码

function getTotalOffsetTop(element: HTMLElement) {
    let totalOffsetTop = 0;
    while (element) {
      if(totalOffsetTop > 0) {
        totalOffsetTop += element.clientTop;
      }
      totalOffsetTop += element.offsetTop;
      element = element.offsetParent as HTMLElement;
    }
    return totalOffsetTop;
}

这里有两个 clientTop，当前元素的 clientTop 不用加：

综上，当鼠标事件触发时，可以通过 pageY、clientY、screenY、offsetY 来计算位置，也可以通过元素的 getBoundingClientRect 和 scrollTop、offsetTop、clientTop 等来算，结合 window.scrollY。

这里 clientY 和 getBoundingClientRect().top 也要区分下：

一个是元素距离可视区域顶部的距离，一个是鼠标事件触发位置到可视区域顶部的距离。

比如页面是否滚动到底部，就可以通过 document.documentElement.scrollTop + window.innerHeihgt 和 document.documentElement.scrollHeight 对比。

这里有涉及到了几个新的属性。

根元素 documentElement 的 scrollTop 就是 window.scrollY：

然后 window.innerHeight、window.innerWidth 是窗口的宽高，也就是可视区域的宽高。

至于 scrollHeight，这是元素的包含滚动区域的高度。

类似的有 clientHeight、offsetHeight、getBoundingClient().height 这几个高度要区分下：




javascript复制代码

import { MouseEventHandler, useEffect, useRef } from 'react'

function App() {
  const ref = useRef<HTMLDivElement>(null);

  const clickHandler: MouseEventHandler<HTMLDivElement> = (e) => {
    console.log('clentHeight', ref.current?.clientHeight);
    console.log('scrollHeight', ref.current?.scrollHeight);
    console.log('offsetHeight', ref.current?.offsetHeight);
    console.log('clent rect height', ref.current?.getBoundingClientRect().height);
  }

  return (
    <div>
      <div id="box" ref={ref} style={{
        border: '10px solid #000',
        marginTop: '300px',
        width: '100px',
        height: '100px',
        background: 'pink',
        overflow: 'auto'
      }} onClick={clickHandler}>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
      </div>
    </div>
  )
}

export default App

试一下：

clientHeight 是内容区域的高度，不包括 border。

offsetHeight 包括 border。

scrollHeight 是滚动区域的总高度，不包括 border。

那看起来 getBoundingClientRect().height 和 offsetHeight 一模一样？

绝大多数情况下是的。

但你旋转一下：

就不一样了：

getBoundingClientRect 拿到的包围盒的高度，而 offsetHeight 是元素本来的高度。

所以，对于滚动到页面底部的判断，就可以用 window.scrollY + window.innerHeight 和 document.documentElement.scrollHeight 对比。




javascript复制代码

import { useEffect, useRef } from 'react'

function App() {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    window.addEventListener('scroll', () => {
      console.log(window.scrollY + window.innerHeight, document.documentElement.scrollHeight);
    })
  }, []);

  return (
    <div>
      <div id="box" ref={ref} style={{
        border: '10px solid #000',
        marginTop: '800px',
        width: '100px',
        height: '100px',
        background: 'pink',
        overflow: 'auto',
        transform: 'rotate(45deg)'
      }}>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
        <p>xxxxx</p>
      </div>
    </div>
  )
}

export default App

这样，浏览器里的各种距离和宽高我们就过了一遍。

总结

浏览器里计算位置、宽高、判断一些交互，都需要用到距离、宽高的属性。

这类属性比较多，我们整体过了一遍：

e.pageY：鼠标距离文档顶部的距离
e.clientY：鼠标距离可视区域顶部的距离
e.offsetY：鼠标距离触发事件元素顶部的距离
e.screenY：鼠标距离屏幕顶部的距离
winwodw.scrollY：页面滚动的距离，也叫 window.pageYOffset，等同于 document.documentElement.scrollTop
element.scrollTop：元素滚动的距离
element.clientTop：上边框高度
element.offsetTop：相对有 position 的父元素的内容顶部的距离，可以递归累加，加上 clientTop，算出到文档顶部的距离
clientHeight：内容高度，不包括边框
offsetHeight：包含边框的高度
scrollHeight：滚动区域的高度，不包括边框
window.innerHeight：窗口的高度
element.getBoundingClientRect：拿到 width、height、top、left 属性，其中 top、left 是元素距离可视区域的距离，width、height 绝大多数情况下等同 offsetHeight、offsetWidth，但旋转之后就不一样了，拿到的是包围盒的宽高

其中，还要注意 react 的合成事件没有 offsetY 属性，可以自己算，react-use 的 useMouse 的 hook 就是自己算的，也可以用 e.nativeEvent.offsetY 来拿到。

掌握这些宽高、距离属性，就足够处理各种需要计算位置、宽高的需求了。

更多内容可以看我的小册《React 通关秘籍》

源文：图解网页的各种距离

如有侵权请联系站点删除！

图解网页的各种距离

图解网页的各种距离

总结

最新文章

惊艳！你见过这么炫酷动画的导航栏吗？

告别 "if-else"，改用 "return"！

独立开发：产品定义和独开分类

苹果AI上线，ChatGPT免费用！首款M4 Mac诞生，库克：这是全世界最佳AI一体机

某大厂原14级离职分享

js实现大数字求和

JavaScript中闭包会导致内存泄漏吗

别再用设计模式来消除 if else 了

热门标签

快速导航

联系我们

友情链接

图解网页的各种距离

图解网页的各种距离

总结

前端 er 如何玩转音视频流-WebRTC 技术介绍

Flutter - 热更新 Shorebird 1.0 正式版来了 🐦

最新文章

惊艳！你见过这么炫酷动画的导航栏吗？

告别 "if-else"，改用 "return"！

独立开发：产品定义和独开分类

苹果AI上线，ChatGPT免费用！首款M4 Mac诞生，库克：这是全世界最佳AI一体机

某大厂原14级离职分享

js实现大数字求和

JavaScript中闭包会导致内存泄漏吗

别再用设计模式来消除 if else 了

热门标签

快速导航

联系我们

友情链接