元素偏移（offset，scroll,client)介绍，动态设置类名

标签：滚动 元素 边框 滚动条 宽度 client offset scroll 属性

文章目录

• 一 offset，scroll,client简单介绍
• 二、scroll系列
• • 1 scrollWidth
  • 2 scrollHeight
  • 3 scrollTop
  • 4 scrollLeft
• 三、offset系列
• • 1.offsetHeight
  • 2.offsetWidth
  • 3.offsetTop
  • 4.offsetLeft
• 四 client系列
• • 1 clientTop
  • 2 clientLeft
  • 3 clientWidth
  • 4 clientHeight
• 五 案例
• • 1 动态设置类名
  • 2 classList 介绍

---

一 offset，scroll,client简单介绍

属性 / 方法	描述
element.clientTop	表示一个元素的顶部边框的宽度，以像素表示。
element.clientLeft	表示一个元素的左边框的宽度，以像素表示。
element.clientHeight	在页面上返回内容的可视高度（高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）
element.clientWidth	在页面上返回内容的可视宽度（宽度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）
element.offsetHeight	返回任何一个元素的高度包括边框（border）和内边距（padding），但不包含外边距（margin）
element.offsetWidth	返回元素的宽度，包括边框（border）和内边距（padding），但不包含外边距（margin）
element.offsetLeft	返回当前元素的相对水平偏移位置的偏移容器
element.offsetTop	返回当前元素的相对垂直偏移位置的偏移容器
element.scrollHeight	返回整个元素的高度（包括带滚动条的隐蔽的地方）
element.scrollLeft	返回当前视图中的实际元素的左边缘和左边缘之间的距离
element.scrollTop	返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
element.scrollWidth	返回元素的整个宽度（包括带滚动条的隐蔽的地方）

二、scroll系列

1 scrollWidth

定义: scrollWidth 是元素的内容区域的总宽度，包括溢出到视口之外的部分，但不包括边框、内边距或外边距。
用途:主要用于计算滚动条的长度，或确定内容是否超出容器的视口宽度。

  <view class="container" id="myContainer">
        <view class="content" id="myContent"></view>
    </view>
   init() {
      const container = document.getElementById('myContainer');
      console.log('Scroll Width:', container.scrollWidth); // 输出: 400
    }

.container {
    width: 200px;
    overflow: auto;
    border: 1px solid black;
    height: 200px;
}
.content {
    width: 400px; /* 内容宽度大于容器宽度 */
    height: 400px;
}

2 scrollHeight

定义: scrollHeight 是元素的内容区域的总高度，包括所有超出可视区域的部分。它表示整个内容的垂直高度，不受视口或容器大小限制。
用途: 用于判断元素的内容是否溢出容器，或动态调整布局、滚动条等。

  <view class="container" id="myContainer">
        <view class="content" id="myContent"></view>
    </view>
   init() {
      const container = document.getElementById('myContainer');
      console.log('Scroll Width:', container.scrollWidth); // 输出: 400
    }

.container {
    width: 200px;
    overflow: auto;
    border: 1px solid black;
    height: 200px;
}
.content {
    width: 400px; 
    height: 800px;/* 内容高度大于容器高度 */
}

3 scrollTop

用于获取或设置一个元素的垂直滚动位置。它表示元素的内容区域相对于其顶部边界的滚动距离。这个属性对于处理滚动条位置和动态更新内容位置非常有用。

定义: scrollTop 是元素的内容区域相对于其上边缘的垂直滚动距离。值为 0 表示内容没有滚动，值为更大的数字表示内容向上滚动的距离。

用途: 用于获取当前的滚动位置或设置新的滚动位置。可以用于实现滚动动画、页面滚动到特定位置等功能。

使用场景

1. 获取滚动位置: 可以用 scrollTop 获取元素的当前滚动位置，以便进行相应的逻辑处理或更新用户界面。
2. 设置滚动位置: 通过设置 scrollTop 可以实现滚动到特定位置的效果，比如页面加载时滚动到某个部分或点击按钮后自动滚动。

 // 滚动到顶部
        scrollToTop() {
            const container = document.getElementById('myContainer');
            const scrollPos = document.getElementById('scrollPos');
            container.scrollTop = 0;
        },

        // 滚动到底部
        scrollToBottom() {
            const container = document.getElementById('myContainer');
            const scrollPos = document.getElementById('scrollPos');
            container.scrollTop = container.scrollHeight;
        }

4. 滚动动画: 使用 scrollTop 结合动画库（如 requestAnimationFrame）可以创建平滑的滚动效果。
5. 实现懒加载: 在用户滚动到页面底部时动态加载更多内容，常用于实现无限滚动效果。

4 scrollLeft

scrollLeft 是一个 JavaScript 属性，用于获取或设置一个元素的水平滚动位置。它表示元素内容区域相对于其左边缘的水平滚动距离。这个属性对于处理水平滚动条的位置和动态更新内容的位置非常有用。

定义: scrollLeft 表示元素的内容区域相对于其左边缘的水平滚动距离。值为 0表示内容没有水平滚动，值为更大的数字表示内容向左滚动的距离。

用途: 用于获取当前的水平滚动位置或设置新的水平滚动位置。可以用于实现横向滚动动画、页面水平滚动到特定位置等功能。

三、offset系列

1.offsetHeight

offsetHeight 是一个 JavaScript 属性，用于获取一个元素的高度，包括其边框、内边距和水平滚动条的高度，但不包括外边距（margin）。

定义: offsetHeight返回一个整数值，表示元素的高度，包括内边距、边框和水平滚动条的高度（如果有的话），但不包括外边距。它是元素的实际显示高度的总和。

用途: 用于获取元素的实际高度，进行布局调整或动画效果时非常有用。它可以帮助你确定元素的占用空间，以便进行进一步的操作。

使用场景

1. 获取元素高度: 使用 offsetHeight 可以获得元素的实际高度，这对布局计算和动态调整元素大小非常有帮助。
2. 动画效果: 在实现动画效果时，例如动态调整元素的高度时，可以使用 offsetHeight 来确保动画的起始和结束高度是准确的。
3. 布局调整: 计算其他元素的相对位置或高度时，offsetHeight 提供了元素的完整显示高度，包括边框和内边距。

注意事项

1. 只读属性: offsetHeight 是一个只读属性，不能直接修改它的值。要调整元素的高度，你需要修改其样式属性，如 height 或
   padding。
2. 不可用的元素: 对于没有显示的元素（例如 display: none），offsetHeight 返回 0，因为该元素的高度不能被计算。
3. 滚动条: 如果元素内部有水平滚动条，offsetHeight 仍然包含水平滚动条的高度，但不包括垂直滚动条。

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
    background-color: lightblue;
}

const box = document.getElementById('myBox');
const boxHeight = document.getElementById('boxHeight');
console.log("box.offsetHeight:",box.offsetHeight); // 130

2.offsetWidth

offsetWidth 是 JavaScript 中的一个属性，用于获取一个元素的宽度，包括其边框、内边距和垂直滚动条的宽度（如果有的话），但不包括外边距（margin）。这个属性通常用于测量和调整元素的宽度。

定义: offsetWidth 返回一个整数值，表示元素的总宽度，包括内边距、边框和垂直滚动条的宽度（如果有的话），但不包括外边距。它是元素实际显示宽度的总和。

用途: 用于获取元素的实际宽度，可以帮助你在进行布局调整、动画效果或者测量元素占用的空间时进行准确的计算。

使用场景

1. 获取元素宽度: 使用 offsetWidth 可以获得元素的实际宽度，这对于布局计算和动态调整元素宽度非常有用。
2. 动画效果: 在实现动画效果时，例如动态调整元素的宽度，可以使用 offsetWidth 来确保动画的起始和结束宽度是准确的。
3. 布局调整: 计算其他元素的相对位置或宽度时，offsetWidth 提供了元素的完整显示宽度，包括边框和内边距。

注意事项

1. 只读属性: offsetWidth 是一个只读属性，不能直接修改它的值。要调整元素的宽度，你需要修改其样式属性，如 width 或
   padding。
2. 不可用的元素: 对于没有显示的元素（例如 display: none），offsetWidth 返回 0，因为该元素的宽度不能被计算。
3. 滚动条: 如果元素内部有垂直滚动条，offsetWidth 仍然包含垂直滚动条的宽度，但不包括水平滚动条。

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
    background-color: lightblue;
}

const box = document.getElementById('myBox');
const boxHeight = document.getElementById('boxHeight');
console.log("box.offsetHeight:",box.offsetWidth); // 230

3.offsetTop

offsetTop 是 JavaScript 中的一个属性，用于获取一个元素相对于其最近的具有定位属性的父元素的顶部距离。这个属性返回一个整数值，表示元素的上边界距离父元素顶部的像素数。

定义: offsetTop返回一个整数，表示元素的顶部边缘距离其包含块（即最近的有定位属性的父元素）顶部的距离。如果元素的父元素没有定位属性，则相对于文档的顶部返回距离。

用途: 用于获取元素的垂直位置，可以帮助你在进行布局计算、滚动处理或者动态调整元素位置时进行准确的测量。

使用场景

1. 布局计算: offsetTop 常用于计算元素的垂直位置，帮助确定元素相对于其父元素的位置。
2. 滚动处理: 在处理滚动事件时，offsetTop 可以用来确定元素相对于视口的位置，以便实现滚动效果或懒加载。
3. 动态调整位置: 在动态调整元素的位置时，offsetTop 可以提供当前的位置参考，以便进行相对调整。

注意事项

1. 相对父元素: offsetTop 是相对于最近的有定位属性的父元素计算的。如果没有具有定位属性的父元素，它将相对于文档的顶部计算。
2. 只读属性: offsetTop 是一个只读属性，不能直接修改。如果需要更改元素的位置，应调整其 top 或 margin 样式属性。

不包括边框和内边距: offsetTop 只考虑元素的边缘和定位属性，不包括元素的边框和内边距对位置的影响。

4.offsetLeft

offsetLeft 是 JavaScript 中的一个属性，用于获取一个元素相对于其最近的具有定位属性的父元素的左边界的距离。它返回一个整数值，表示元素的左边缘距离父元素左边的像素数。

定义: offsetLeft返回一个整数，表示元素的左边缘距离其包含块（即最近具有定位属性的父元素）左边的距离。如果元素的父元素没有定位属性，则相对于文档的左边返回距离。

用途: 主要用于获取元素的水平位置，可以帮助你在进行布局计算、处理滚动或动态调整元素位置时进行准确的测量。

使用场景

1. 布局计算: offsetLeft 可以帮助计算元素的水平位置，这在设计复杂布局或相对位置时非常有用。
2. 滚动处理: 在处理滚动事件时，offsetLeft 可以用来确定元素相对于视口的水平位置，辅助实现滚动效果或懒加载。
3. 动态调整位置: 在动态调整元素位置时，offsetLeft 可以提供当前的位置参考，帮助进行位置的相对调整。

注意事项

1. 相对父元素: offsetLeft 是相对于最近具有定位属性的父元素计算的。如果没有具有定位属性的父元素，它将相对于文档的左边计算。
2. 只读属性: offsetLeft 是一个只读属性，不能直接修改。如果需要更改元素的位置，应调整其 left 或 margin 样式属性。

不包括边框和内边距: offsetLeft 只考虑元素的边缘和定位属性，不包括边框和内边距对位置的影响。

四 client系列

1 clientTop

它返回元素的上边框（border-top）的宽度，以像素为单位。这个属性对于计算和调整元素的布局非常有用，尤其是在涉及到边框和内部布局的情况时。

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border-top: 20px solid black;
    border-bottom: 10px solid black;
    margin: 20px;
    background-color: lightblue;
}

const box = document.getElementById('myBox');
const boxHeight = document.getElementById('boxHeight');
console.log("box.clientTop:",box.clientTop);   // 20

定义: clientTop 返回元素的上边框的宽度，不包括边框之外的任何内容（如内边距、边框宽度、外边距等）。

用途: 主要用于精确计算元素的实际位置，尤其是在涉及到边框宽度的计算时。它与 offsetTop 类似，但 offsetTop 是元素相对于其定位父元素的距离，而 clientTop 只关心元素的上边框。

使用场景

1. 精确布局计算: clientTop 可以帮助你在计算元素的实际位置时排除边框的影响，特别是在你需要进行精确的对齐和位置调整时。
2. 动态样式调整: 在动态修改元素样式或进行复杂布局调整时，了解 clientTop 可以帮助确保布局的一致性和准确性。
3. 跨浏览器兼容性: clientTop是一个标准属性，在大多数现代浏览器中都可以使用，但在处理不同浏览器的兼容性问题时，了解其行为和返回值可能会有帮助。

注意事项

1. 只读属性: clientTop 是一个只读属性，你不能直接修改它的值。如果需要更改元素的上边框宽度，应调整元素的border-top-width 样式属性。
2. 整数值: clientTop 返回的是一个整数值，表示上边框的宽度，单位是像素。

不包括外边距: clientTop 不包括外边距（margin），仅表示边框宽度。

2 clientLeft

用于获取元素的左边框（border-left）的宽度，以像素为单位。它与 clientTop 类似，但关注的是左边框的宽度。

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border-top: 20px solid black;
    border-left: 10px solid black;
    margin: 20px;
    background-color: lightblue;
}
const box = document.getElementById('myBox');
const boxHeight = document.getElementById('boxHeight');
console.log("box.clientTop:",box.clientLeft); //10

定义: clientLeft 返回元素的左边框的宽度，不包括边框之外的任何内容（如内边距、边框宽度、外边距等）。

用途: clientLeft主要用于精确计算元素的实际布局，特别是在涉及到左边框宽度的计算时。它可以帮助确定元素的真实位置，尤其是在处理复杂的布局和对齐时。

使用场景

1. 精确布局计算: clientLeft 对于排除边框影响的布局计算很有帮助，特别是在处理元素左侧边框的宽度时。
2. 动态样式调整: 在动态修改元素样式或进行布局调整时，了解 clientLeft 的值可以确保布局的准确性和一致性。
3. 跨浏览器兼容性: clientLeft 是一个标准属性，通常在现代浏览器中支持，但了解其行为和返回值在处理跨浏览器兼容性时也有帮助。

注意事项

1. 只读属性: clientLeft 是一个只读属性，表示元素的左边框宽度。要修改左边框的宽度，应调整 border-left-width 样式属性。
2. 整数值: clientLeft 返回一个整数值，单位为像素，表示左边框的宽度。

不包括外边距: clientLeft 不包括外边距（margin），仅表示边框宽度。

3 clientWidth

用于获取元素的内部宽度（即内容区域的宽度），不包括滚动条、边框和外边距。它的值是一个整数，表示元素的内容区域宽度，以像素为单位。

定义: clientWidth返回元素的内容区域的宽度。这个宽度包括内边距（padding），但不包括边框（border）、滚动条（scrollbar）和外边距（margin）。

用途: clientWidth主要用于获取元素的实际可视内容宽度。它在动态布局计算和元素尺寸调整时非常有用，尤其是在需要精确计算内容区域的宽度时。

使用场景

1. 动态布局调整: 当需要根据元素的实际内容区域宽度来调整布局时，clientWidth 是一个重要的属性。例如，可以根据内容区域宽度动态调整其他元素的大小或位置。
2. 响应式设计: 在实现响应式设计时，可以使用 clientWidth 来获取当前视口或容器的宽度，以确定如何调整内容或样式。
3. 计算元素尺寸: 获取 clientWidth 可以帮助计算元素的实际可视区域，从而进行更精确的布局或样式调整。

注意事项

1. 只读属性: clientWidth 是一个只读属性，表示元素的内容区域宽度。要修改宽度，应调整元素的 width 样式属性。
2. 整数值: clientWidth 返回一个整数值，单位为像素，表示内容区域的宽度。

不包括外边距和滚动条: clientWidth 不包括外边距（margin）和滚动条（scrollbar），仅表示内容区域的宽度。

4 clientHeight

用于获取元素的内部高度（即内容区域的高度），不包括滚动条、边框和外边距。它的值是一个整数，表示元素的内容区域高度，以像素为单位。

定义: clientHeight 返回元素的内容区域的高度。这个高度包括内边距（padding），但不包括边框（border）、滚动条（scrollbar）和外边距（margin）。

用途: clientHeight 主要用于获取元素的实际可视内容高度。它在动态布局计算和元素尺寸调整时非常有用，尤其是在需要精确计算内容区域的高度时。

使用场景

1. 动态布局调整: 当需要根据元素的实际内容区域高度来调整布局时，clientHeight是一个重要的属性。例如，可以根据内容区域高度动态调整其他元素的大小或位置。
2. 响应式设计: 在实现响应式设计时，可以使用 clientHeight 来获取当前视口或容器的高度，以确定如何调整内容或样式。
3. 计算元素尺寸: 获取 clientHeight 可以帮助计算元素的实际可视区域，从而进行更精确的布局或样式调整。

注意事项

1. 只读属性: clientHeight 是一个只读属性，表示元素的内容区域高度。要修改高度，应调整元素的 height 样式属性。
2. 整数值: clientHeight 返回一个整数值，单位为像素，表示内容区域的高度。

不包括外边距和滚动条: clientHeight 不包括外边距（margin）和滚动条（scrollbar），仅表示内容区域的高度。

五 案例

1 动态设置类名

  created() {
     document.addEventListener('scroll', this.addClientTrendClass) //监听页面滚动事件
  },
    /**
     * 添加客户动态类名
     */
    addClientTrendClass() {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      const mainTrendHead = document.querySelector('.main-trend-head')
      const mainTrendHeadContent = document.querySelector('.main-trend-head-content')
      if (scrollTop >= mainTrendHead.offsetTop) {
      // 判断滚动条滚动的距离是否大于mainTrendHead距离顶部的距离
        mainTrendHeadContent.classList.add('main-trend-head-content-fixed')
      } else {
        mainTrendHeadContent.classList.remove('main-trend-head-content-fixed')
      }
    },

2 classList 介绍

表示一个 HTML 元素的类属性（class 属性）的集合。它提供了一些方法和属性来方便地操作元素的类列表。

方法详解

1. add(…classNames):
   作用: 将一个或多个类名添加到元素的 class 属性中。

element.classList.add('new-class');
element.classList.add('another-class', 'yet-another-class');

2. remove(…classNames):

作用: 从元素的 class 属性中移除一个或多个类名。

element.classList.remove('old-class');
element.classList.remove('class-to-remove1', 'class-to-remove2');

3. toggle(className, force):

作用: 如果元素中存在指定的类名，则移除它；如果不存在，则添加它。如果提供了第二个布尔值参数 force，则根据该参数的值强制添加或移除类。

element.classList.toggle('toggle-class'); // 自动切换
element.classList.toggle('force-class', true); // 强制添加
element.classList.toggle('force-class', false); // 强制移除

4. contains(className):

作用: 检查元素的 class 属性中是否包含指定的类名。

if (element.classList.contains('some-class')) {
    console.log('Element contains "some-class"');
}

5. item(index):

作用: 返回指定索引位置的类名。索引从 0 开始。

console.log(element.classList.item(0)); // 输出第一个类名

6. length:
   作用: 返回类列表中的类的数量。

console.log(element.classList.length); // 输出类的数量

7. value:

作用: 返回一个以空格分隔的类名字符串（class 属性的完整值）。

console.log(element.classList.value); // 输出所有类名的字符串

标签：滚动,元素,边框,滚动条,宽度,client,offset,scroll,属性
From： https://blog.csdn.net/qq_48763502/article/details/141265159