Element.scrollIntoView()的使用

最新推荐文章于 2023-09-18 18:12:34 发布

何嘉烟

最新推荐文章于 2023-09-18 18:12:34 发布

阅读量1k

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/the_more_more/article/details/125954801

版权

Element.scrollIntoView()的使用

前言

最近研究聊天室的实现内容的时候，每当用户发消息的使用，我们需要把刚收到或者发送的信息展示在盒子的底部进行展示，但如何保证发的信息会一直在底部实现，查阅资料使用了原生的是事件：scrollIntoView()

介绍

MDN是这样介绍的：Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。简单的来说就是调用这个方法的元素会出现在可视区域，也就是我们应该看到的区域。

语法介绍

element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions); // Object 型参数

我们如果不传值的话，括号的内容默认是true，也就是会使element元素的顶部与可见区域对其，如果是false的话就是底部与可视区域对其，这个就是聊天的时候的效果，如果说我们需要加一点缓和的过度效果的话，可以改为传入一个对象作为参数，参数如下：

参数

alignToTop可选

一个Boolean值：

如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。
如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。

scrollIntoViewOptions 可选

一个包含下列属性的对象：

behavior 可选

定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。
block 可选

定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。
inline 可选

定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

只能传递一个参数，如果传递了第二个参数的话，第二个参数将失效。

示例

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    html {
      scroll-behavior: smooth;
    }

    .box1 {
      background-color: gray;
      width: 400px;
      height: 400px;
      margin: 50px auto;
      padding: 20px;
      overflow: auto;
    }

    .box2 {
      width: 100px;
      height: 200px;
      background-color: red;
    }

    .btn {
      width: 50px;
      height: 50px;
    }

    .box3 {
      background-color: blue;
      width: 100px;
      height: 800px;
      position: relative;
    }

    .bottom {
      position: absolute;
      bottom: 0;
    }
  </style>
</head>

<body>
  <button class="btn" id="btn1">true</button>
  <button class="btn" id="btn2">false</button>
  <div class="box1">
    <div class="box2">
      <p>这是别人的信息</p>
    </div>
    <div class="box3">
      <p>这是你的信息</p>
      <p class="bottom">这是蓝色盒子底部</p>
    </div>
  </div>
  <script>
    let btn1 = document.querySelector('#btn1')
    let btn2 = document.querySelector('#btn2')
    console.log(btn1)
    btn1.onclick = function () {
      document
        .querySelector('.box3')
        .scrollIntoView(true)
      // 加上缓和动画
      // document
      //   .querySelector('.box3')
      //   .scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
    }
    btn2.onclick = function () {
      document
        .querySelector('.box3')
        .scrollIntoView(false)
      // 加上缓和动画
      // document
      //   .querySelector('.box3')
      //   .scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' })
    }
  </script>
</body>

</html>

后续疑问查证可以了解MDN的介绍：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

何嘉烟

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Element.scrollIntoView()的使用

MDNElement接口的方法会滚动元素的父容器，使被调用的元素对用户可见。简单的来说就是调用这个方法的元素会出现在可视区域，也就是我们应该看到的区域。//等同于element.scrollIntoView(true)element.scrollIntoView(alignToTop);//Boolean型参数element.scrollIntoView(scrollIntoViewOptions);//Object型参数我们如果不传值的话，括号的内容默认是true的顶部与。...
复制链接

扫一扫