前端滚动的几种方式（滚动到可视区内）

1. Element.scrollTop; （同类还有scollLeft等等）

let intElemScrollTop = Element.scrollTop; // 可以直接获取滚动的像素值

Element.scrollTop = intValue; // 也可以直接设置滚动的距离

注意：scrollWidth，scrollHeight 是只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。也就是整个内容区域可滚动范围的高度。（高度度量方式：包括内边距，不包括边框，外边距以及水平滚动条存在的话，包括 ::before 和 ::after 这样的伪元素的高度）

clientHeight与scrollHeight 区别clientHeight与scrollHeight 区别-CSDN博客

2. Element.scrollTo() 该方法无返回值

scrollTo(x-coord, y-coord)

scrollTo(options) options对象包含top, left, behavior（smooth 平滑滚动效果、instant 直接跳转到目标位置、auto 或缺省值表示浏览器会自动选择滚动时的过渡效果。）

实例

element.scrollTo(0, 1000);element.scrollTo({  top: 100,  left: 100,  behavior: "smooth",});

3. Element.scrollBy()

（使元素滚动一段特定距离的 Element 接口）语法与scrollTo类似两种方式，只不过参数是偏移量了

4. Element.scrollIntoView()

将元素滚动到可视区域之内，具体解释：Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。参考官网 Element.scrollIntoView() - Web API 接口参考 | MDN

语法

scrollIntoView()scrollIntoView(alignToTop) // alignToTop是布尔值，true会滚动到可视区域最上面，false会滚到可视区域最下面scrollIntoView(scrollIntoViewOptions) // 参数为对象，    对象里面三个可选属性behavior， block，inline    behavior：同上面scrollTo方法中的属性    block：定义垂直方向的对齐，start、center、end 或 nearest 之一。默认为 start。    inline： 定义水平方向的对齐，start、center、end 或 nearest 之一。默认为 nearest。

5. 使用浏览器锚点（Anchor）来让元素滚动到可视区域

给目标元素设置一个唯一的ID作为锚点，例如：

<div id="targetElement">  <!-- 目标元素的内容 --></div>

创建一个带有锚点的链接或按钮，如下所示：

<a href="#targetElement">点击这里滚动到目标元素</a>

当用户点击这个链接时，浏览器会自动滚动到具有对应ID的元素处，使该元素位于可视区域内。

6. 使用CSS动画：

        通过CSS的transition、transform等属性来添加动画效果，从而实现页面滚动。例如，可以通过设置transform: translate3d(0, -100px, 0);来向上滚动100像素。

7. 使用插件或框架：

        还有许多第三方插件和框架可以实现复杂的滚动效果，如FullPage.jsfullPage.js | 单页滚动部分网站插件、iscroll.js等。

本文链接：https://www.kjpai.cn/news/2024-03-31/151768.html，文章来源：网络cs，作者：璐璐，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！