【日常记录】【JS】Web浏览器滚动方案，Window：scrollTo()、Window：scrollBy()、Element.scrollIntoView() 三种方案

嘤嘤怪呆呆狗

于 2024-07-26 11:22:40 发布

阅读量158

点赞数 4

分类专栏：日常记录文章标签：前端 javascript 开发语言 vue.js

本文链接：https://blog.csdn.net/qq_45634593/article/details/140708844

版权

日常记录专栏收录该内容

43 篇文章 0 订阅

订阅专栏

文章目录

1. html结构搭建

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      height: 500px;
      margin-bottom: 20px;
    }

    .btns {
      position: fixed;
      right: 10px;
      top: 10px;

    }
  </style>
</head>

<body>
  <div class="btns">
    <button id="scrollTo">scrollTo 相对于整个文档滚动</button>

  </div>
  <div class="box">0001</div>
  <div class="box">0002</div>
  <div class="box">0003</div>
  <div class="box">0004</div>
  <div class="box">0005</div>
  <div class="box">0006</div>
  <script>
    function getRandomHexColor() {
      return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
    }
    let boxEl = document.querySelectorAll('.box');
    boxEl.forEach(item => {
      item.style.backgroundColor = getRandomHexColor();
    })


  </script>
</body>

</html>

2. Window：scrollTo() 方法

Window.scrollTo() 会滚动到文档中的一组特定坐标。

语法

scrollTo(x-coord, y-coord)
scrollTo(options)

参数

x-coord 是你希望显示在左上角的文档水平轴像素。
y-coord 是你希望显示在左上角的文档垂直轴像素。
options：可以包含以下参数
- top：指定沿 Y 轴滚动窗口或元素的像素数量。
- left：指定沿 X 轴滚动窗口或元素的像素数量。
- behavior：滚动的方式，值是枚举
  - smooth：滚动应该平滑地进行动画展示
  - instant：滚动应在一次跳转中即时完成
  - auto：滚动行为由 scroll-behavior 的计算值来决定

返回值

无

在这里插入图片描述

    document.getElementById('scrollTo').addEventListener('click', () => {
      window.scrollTo({
        top: 1000,
        left: 0,
        behavior: 'smooth'
      })
    })

上面这个就是 smooth 的滚动效果，开发中一般常用的也是这个

在这里插入图片描述

上面就是这个 instant 的滚动效果，这个是直接一闪而过

一般在开发中，常见得是，滚动到界面顶部，或者滚动到指定得元素

<body>
  <div class="btns">
    <button id="scrollTo">scrollTo 相对于整个文档滚动</button>
    <button id="scrollTo5">scrollTo 相对于整个文档滚动 滚动到第5个元素</button>

  </div>
  <div class="box">0001</div>
  <div class="box">0002</div>
  <div class="box">0003</div>
  <div class="box">0004</div>
  <div class="box">0005</div>
  <div class="box">0006</div>
  <script>
    function getRandomHexColor() {
      return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
    }
    let boxEl = document.querySelectorAll('.box');
    boxEl.forEach(item => {
      item.style.backgroundColor = getRandomHexColor();
    })

    document.getElementById('scrollTo').addEventListener('click', () => {
      window.scrollTo({
        top: 1000,
        left: 0,
        behavior: 'instant'
      })
    })
    document.getElementById('scrollTo5').addEventListener('click', () => {
      window.scrollTo({
        top: boxEl[4].offsetTop,
        left: 0,
        behavior: 'smooth'
      })
    })
  </script>

3. Window：scrollBy() 方法

相对于当前滚动位置滚动 (x, y) 像素

语法

scrollTo(x-coord, y-coord)
scrollTo(options)

参数

x-coord 是你想滚动的水平像素值。
y-coord 是你想滚动的垂直像素值。
options：可以包含以下参数
- top：指定沿 Y 轴滚动窗口或元素的像素数。。
- left：指定沿 X 轴滚动窗口或元素的像素数。。
- behavior：滚动的方式，值是枚举
  - smooth：滚动应该平滑地进行动画展示
  - instant：滚动应在一次跳转中即时完成
  - auto：滚动行为由 scroll-behavior 的计算值来决定

返回值

无

示例
在这里插入图片描述

<body>
  <div class="btns">
    <button id="scrollTo">scrollTo 相对于整个文档滚动</button>
    <button id="scrollTo5">scrollTo 相对于整个文档滚动 滚动到第5个元素</button>
    <button id="scrollBy">scrollBy 相对于当前位置滚动</button>
  </div>
  <div class="box">0001</div>
  <div class="box">0002</div>
  <div class="box">0003</div>
  <div class="box">0004</div>
  <div class="box">0005</div>
  <div class="box">0006</div>
  <script>
    function getRandomHexColor() {
      return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
    }
    let boxEl = document.querySelectorAll('.box');
    boxEl.forEach(item => {
      item.style.backgroundColor = getRandomHexColor();
    })

    document.getElementById('scrollTo').addEventListener('click', () => {
      window.scrollTo({
        top: 1000,
        left: 0,
        behavior: 'instant'
      })
    })
    document.getElementById('scrollTo5').addEventListener('click', () => {
      window.scrollTo({
        top: boxEl[4].offsetTop,
        left: 0,
        behavior: 'smooth'
      })
    })
    document.getElementById('scrollBy').addEventListener('click', () => {
      window.scrollBy({
        top: -200,
        left: 0,
        behavior: 'smooth'
      })
    })
  </script>
</body>

可以看出，scrollBy 它是基于当前得位置进行滚动

4. Element.scrollIntoView()

Element.scrollIntoView() 是一个用于滚动页面以使某个元素进入视口的 JavaScript 方法。它可以自动滚动页面，使得指定的元素在视口中可见。

语法

scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)

参数

alignToTop：可选，一个布尔值
- 如果为 true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: “start”, inline: “nearest”}。这是这个参数的默认值
- 如果为 false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的 scrollIntoViewOptions: {block: “end”, inline: “nearest”}。
scrollIntoViewOptions ：可选，实验性属性，值是一个对象
- behavior ：可选
  - smooth：滚动应该平滑地进行动画展示
  - instant：滚动应在一次跳转中即时完成
  - auto：滚动行为由 scroll-behavior 的计算值来决定
- block：可选，定义垂直方向的对齐，start、center、end 或 nearest 之一。默认为 start。
- inline：可选，定义水平方向的对齐，start、center、end 或 nearest 之一。默认为 nearest。

示例

<body>
  <div class="btns">
    <button id="scrollTo">scrollTo 相对于整个文档滚动</button>
    <button id="scrollTo5">scrollTo 相对于整个文档滚动 滚动到第5个元素</button>
    <button id="scrollBy">scrollBy 相对于当前位置滚动</button>
    <button id="top" onclick="window.scrollTo(0,0)"> 滚动到顶部</button>
    <button id="scrollTo3">scrollTo 相对于整个文档滚动 滚动到第3个元素</button>
    <button id="top3">滚动到0003的顶部</button>
    <button id="bottom3">滚动到0003的底部</button>
  </div>
  <div class="box">0001</div>
  <div class="box">0002</div>
  <div class="box">0003</div>
  <div class="box">0004</div>
  <div class="box">0005</div>
  <div class="box">0006</div>
  <script>
    function getRandomHexColor() {
      return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
    }
    let boxEl = document.querySelectorAll('.box');
    boxEl.forEach(item => {
      item.style.backgroundColor = getRandomHexColor();
    })

    document.getElementById('scrollTo').addEventListener('click', () => {
      window.scrollTo({
        top: 1000,
        left: 0,
        behavior: 'instant'
      })
    })
    document.getElementById('scrollTo5').addEventListener('click', () => {
      window.scrollTo({
        top: boxEl[4].offsetTop,
        left: 0,
        behavior: 'smooth'
      })
    })
    document.getElementById('scrollBy').addEventListener('click', () => {
      window.scrollBy({
        top: -200,
        left: 0,
        behavior: 'smooth'
      })
    })
    document.getElementById('scrollTo3').addEventListener('click', () => {
      window.scrollTo({
        top: boxEl[2].offsetTop,
        left: 0,
        behavior: 'smooth'
      })
    })
    document.getElementById('top3').addEventListener('click', () => {
      boxEl[2].scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      })
    })

    document.getElementById('bottom3').addEventListener('click', () => {
      boxEl[2].scrollIntoView({
        behavior: 'smooth',
        block: 'end'
      })
    })
  </script>
</body>

在这里插入图片描述

这个就是顶部了，元素的顶端和视口顶部对齐了

在这里插入图片描述

这个就是元素的底部和视口的底部对齐

参考链接

嘤嘤怪呆呆狗

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【日常记录】【JS】Web浏览器滚动方案，Window：scrollTo()、Window：scrollBy()、Element.scrollIntoView() 三种方案

Web浏览器滚动方案，Window：scrollTo()、Window：scrollBy()、Element.scrollIntoView() 三种方案
复制链接

扫一扫

专栏目录