滚动到指定行 scrollIntoView()

最新推荐文章于 2024-07-08 11:19:23 发布

陌上烟雨寒

最新推荐文章于 2024-07-08 11:19:23 发布

阅读量663

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_47180815/article/details/128386836

版权

javascript 前端开发语言

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

需求：滚动到指定行
我：那不得计算行高，然后去滚动（如果行高不固定，怎么实现）

在我苦思无果后，就把这个问题搁置了（直接摆烂）
最近在啃书《javascript高考程序设计》，偶然看到一个方法，scrollIntoView()，只能说妙呀。废话不多说，给大家介绍一下这方法的使用。

scrollIntoView()

(method) Element.scrollIntoView(alignToTop?: boolean | ScrollIntoViewOptions): void

Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。

语法


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

参数

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”。

ok 上代码

   <body>
      <h1>定位</h1>
      <div id="dataDiv" style="overflow-x:hidden;overflow-y:auto;height:350px;">
        <table id="tableId" align="center" border="1">
          <tr>
            <td>name</td>
            <td>age</td>
            <td>sex
            </td>
            <td>address</td>
          </tr>
          <tr>
            <td>name</td>
            <td>age</td>
            <td>sex
            </td>
            <td>address</td>
          </tr>
          <tr>
            <td>name</td>
            <td>age</td>
            <td>sex
            </td>
            <td>address</td>
          </tr>
          <tr>
            <td>name</td>
            <td>age</td>
            <td>sex
            </td>
            <td>address</td>
          </tr>
          <tr>
            <td>name</td>
            <td>age</td>
            <td>sex
            </td>
            <td>address</td>
          </tr>
          <tr>
            <td>name</td>
            <td>age</td>
            <td>sex
            </td>
            <td>address</td>
          </tr>
          <tr>
            <td>name</td>
            <td>age</td>
            <td>sex
            </td>
            <td>address</td>
          </tr>
          <tr>
            <td>name</td>
            <td>age</td>
            <td>sex
            </td>
            <td>address</td>
          </tr>
          <tr>
            <td>name</td>
            <td>age</td>
            <td>sex
            </td>
            <td>address</td>
          </tr>
          <tr>
            <td>name</td>
            <td>age</td>
            <td>sex
            </td>
            <td>address</td>
          </tr>

          <tr>
            <td>name</td>
            <td>age</td>
            <td>sex
            </td>
            <td>address</td>
          </tr>

          <tr>
            <td>name</td>
            <td>age</td>
            <td>sex
            </td>
            <td>address</td>
          </tr>
          <tr>
            <td>name</td>
            <td>age</td>
            <td>sex
            </td>
            <td>address</td>
          </tr>
          <tr>
            <td>name</td>
            <td>age</td>
            <td>sex
            </td>
            <td>address</td>
          </tr>
          <tr>
            <td>name</td>
            <td>age</td>
            <td>sex
            </td>
            <td>address</td>
          </tr>
          <tr style="color:red" class="special">
            <td>name</td>
            <td>age</td>
            <td>sex
            </td>
            <td>address</td>
          </tr>
        </table>
      </div>
      <button class="btn">定位到一行</button>
    </body>

  <script>
    let btn = document.querySelector('.btn');
    let el = document.querySelector('.special');

    btn.addEventListener('click', function () {
      el.scrollIntoView(true, {
        behavior: 'smooth'
      });
    });
  </script>

觉得有用的就点个赞吧 O(∩_∩)O哈哈~

陌上烟雨寒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
滚动到指定行 scrollIntoView()

需求：滚动到指定行。在我苦思无果后，就把这个问题搁置了（直接摆烂）最近在啃书《javascript高考程序设计》，偶然看到一个方法，Element.scrollIntoView()，只能说妙呀。废话不多说，给大家介绍一下这方法的使用。
复制链接

扫一扫

专栏目录