• JS 中的各种距离 scrollTop？clientHeight?

    元素的各种距离

    DOM 对象
    属性描述
    offsetWidth只读，返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
    offsetHeight只读，返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
    clientWidth只读，返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
    clientHeight只读，返回元素的高度（包括元素高度、内边距，不包括边框和外边距）
    style.width可读写，返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）
    style.height可读写，返回元素的高度（包括元素高度，不包括内边距、边框和外边距）
    scrollWidth可读写，返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与 clientWidth 相同
    scrollHeight可读写，返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与 clientHeight 相同
    offsetTop返回元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为 relative、absolute 或者 fixed。
    offsetLeft此属性和 offsetTop 的原理是一样的，只不过方位不同
    scrollTop可读写，此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离，即“元素中的内容”超出“元素上边界”的那部分的高度
    scrollLeft可读写，此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离，也就是元素被滚动条向左拉动的距离。
    window 对象
    属性描述

    innerWidth

    只读，返回窗口的文档显示区的宽度（不包括菜单栏、工具栏以及滚动条等），IE 不支持，window.innerWidth

    innerHeight只读，返回窗口的文档显示区的高度（不包括菜单栏、工具栏以及滚动条等），IE 不支持，window.innerHeight
    outerWidth只读，返回窗口的文档显示区的宽度（包括菜单栏、工具栏以及滚动条等），IE 不支持，window.outerWidth
    outerHeight只读，返回窗口的文档显示区的高度（包括菜单栏、工具栏以及滚动条等），IE 不支持，window.outerHeight

    鼠标相关的距离     

    当鼠标事件发生时（不管是 onclick，还是 omousemove，onmouseover 等）

    属性描述
    clientX鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角 x 轴的坐标；  不随滚动条滚动而改变
    clientY鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角 y 轴的坐标；  不随滚动条滚动而改变
    pageX鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角 x 轴的坐标；  随滚动条滚动而改变
    pageY鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标；  随滚动条滚动而改变
    screenX鼠标相对于显示器屏幕左上角 x 轴的坐标
    screenY鼠标相对于显示器屏幕左上角 y 轴的坐标
    offsetX鼠标相对于事件源左上角 X 轴的坐标
    offsetY鼠标相对于事件源左上角 Y 轴的坐标

  • 相关阅读:
    ConcurrentHashMap （jdk1.7）源码学习
    Unity中Shader法线贴图（下）实现篇
    VUE3 之 使用 Mixin 实现代码的复用 - 这个系列的教程通俗易懂，适合新手
    【C/C++】带你快速掌握 使用—增强for(范围for循环)
    【ESP32 IDF】用RMT控制 WS2812 彩色灯带
    引入css的方式
    如何配置Header Editor
    【云原生】Secret敏感信息存储
    备战数学建模45-粒子群算法优化BP神经网络(攻坚站10)
    ARMday2
  • 原文地址：https://blog.csdn.net/m0_73531461/article/details/139661083