前端滚动的几种方式(滚动到可视区内)

1. Element.scrollTop; (同类还有scollLeft等等)
  1. let intElemScrollTop = Element.scrollTop; // 可以直接获取滚动的像素值
  2. Element.scrollTop = intValue; // 也可以直接设置滚动的距离

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

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

2. Element.scrollTo() 该方法无返回值
  1. scrollTo(x-coord, y-coord)

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

  3. 实例

    javascript">element.scrollTo(0, 1000);
    element.scrollTo({
      top: 100,
      left: 100,
      behavior: "smooth",
    });
3. Element.scrollBy()
  1. (使元素滚动一段特定距离的 Element 接口)
  2. 语法与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的transitiontransform等属性来添加动画效果,从而实现页面滚动。例如,可以通过设置transform: translate3d(0, -100px, 0);来向上滚动100像素。

7. 使用插件或框架:

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

转载请说明出处内容投诉
CSS教程_站长资源网 » 前端滚动的几种方式(滚动到可视区内)

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买