scrollIntoView 与 scrollIntoViewIfNeeded API 介绍

时间 2019-11-07

标签 scrollintoview scrollintoviewifneeded api 介绍繁體版

原文原文链接

Hello~亲爱的观众老爷们你们好！国庆中秋长假快放完了，是时候收拾心（ti）情（zhong）好好学习与工做啦。此次为你们带来的是两个好用 API 的介绍，其实也是偷懒神器。前端

根据 MDN的描述，Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。git

而Element.scrollIntoViewIfNeeded（）方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但若是该元素已经在浏览器窗口的可见区域内，则不会发生滚动。此方法是标准的Element.scrollIntoView()方法的专有变体。github

于是再有什么回到顶部、去到置顶位置和键盘弹出挡住输入框之类的需求，均可以简单解决了。浏览器

然而，面对好用的 API，前端们第一个反映都是，看兼容性！bash

先看scrollIntoView的：学习

看到一片黄黄绿绿的，基本能够安心，不支持的只是某个属性的取值而已，下面会有介绍~动画

以后看看scrollIntoViewIfNeeded：ui

IE和FireFox全红，若是PC端想用的话，基本只能内部项目了，略为惋惜。但移动端仍是绿悠悠的，基本都OK，能够安心使用~spa

因为本文是介绍向~于是每一个属性我都写了点小demo，点进去就能够体验一下哦！3d

scrollIntoView

先介绍scrollIntoView,使用起来其实很简单，获取某个元素后，直接调用scrollIntoViewIfNeeded()便可，简单的demo点这就好，点一下侧边的小绿块，页面就会滚上去。demo代码大概长这样：

<body>
    <div class="chunk"></div>
    <div class="btn">click</div>
    <script>
    const btn = document.querySelector('.btn');
    const test = document.querySelector('.chunk');
    btn.addEventListener('click', function() {
      test.scrollIntoView();
    })
    </script>
</body>复制代码

是否是很简单~不过可能有同窗就有疑问了，这不就和锚点定位同样吗？感受毫无心义啊！先别急，当你调用scrollIntoView的时候，实际上是能够传参数进去的。scrollIntoView只接受一个参数，但接受两种类型的参数，分别是Boolean型参数和Object型参数。

先说Boolean型参数，顾名思义，参数可使true和false。若是为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。若为false，元素的底端将和其所在滚动区的可视区域的底端对齐。简单的例子能够点这里。主要代码以下：

<body>
    <div class="chunk"></div>
    <div class="btn-top">up</div>
    <div class="btn-bottom">down</div>
    <script>
    const up = document.querySelector('.btn-top');
    const down = document.querySelector('.btn-bottom');
    const test = document.querySelector('.chunk');
    up.addEventListener('click', function() {
      test.scrollIntoView(true);
    });
    down.addEventListener('click', function() {
      test.scrollIntoView(false);
    });
    </script>
</body>复制代码

如你所见到的，当传入参数为分别为true与false时，当点击右侧的按钮时，红色的div会贴近可视区域的顶部或底部。

以后是Object型参数，这个对象有两个选项，也就是对象里面的key。block与以前的Boolean型参数一致，不过值再也不是true和false，是更语义化的start和end。

另外一个选项是behavior,MDN上给出三个可取的值，分别是auto、instant与smooth。这个选项决定页面是如何滚动的，实测auto与instant都是瞬间跳到相应的位置，查阅W3C后发现了这么一句:"The instant value of scroll-behavior was renamed to auto."。于是基本能够肯定二者表现是一致的。而smooth就是有动画的过程，惋惜的是以前说起兼容性时说过，黄色其实不支持某个属性，就是不支持behavior取值为smooth。并且，实测了IE及移动端的UC浏览器后发现，它们根本就不支持Object型参数，于是在调用scrollIntoView({...})时，只有默认的结果，即scrollIntoView(true)。简单的例子看这里，若是想体验smooth的效果，须要使用Chrome或者Firefox哦！主要代码以下：

<body>
    <div class="chunk"></div>
    <div class="btn-top">up</div>
    <div class="btn-bottom">down</div>
    <script>
    const up = document.querySelector('.btn-top');
    const down = document.querySelector('.btn-bottom');
    const test = document.querySelector('.chunk');
    up.addEventListener('click', function() {
      test.scrollIntoView({
        block: 'start',
        behavior: 'smooth'
      });
    });
    down.addEventListener('click', function() {
      test.scrollIntoView({
        block: 'end',
        behavior: 'smooth'
      });
    });
    </script>
</body>复制代码

scrollIntoViewIfNeeded

介绍完scrollIntoView，是时候介绍一下它的变体scrollIntoViewIfNeeded了。二者主要区别有两个。首先是scrollIntoViewIfNeeded是比较懒散的，若是元素在可视区域，那么调用它的时候，页面是不会发生滚动的。其次是scrollIntoViewIfNeeded只有Boolean型参数，也就是说，都是瞬间滚动，没有动画的可能了。

scrollIntoViewIfNeeded能够接受一个Boolean型参数，和scrollIntoView不一样，true为默认值，但不是滚动到顶部，而是让元素在可视区域中居中对齐；false时元素可能顶部或底部对齐，视乎元素靠哪边更近。简单的例子能够点这里。大体代码以下：

<body>
    <div class="chunk"></div>
    <div class="scrollIntoView">scrollIntoView top</div>
    <div class="scrollIntoViewIfNeeded-top">scrollIntoViewIfNeeded top</div>
    <div class="scrollIntoViewIfNeeded-bottom">scrollIntoViewIfNeeded botom</div>
    <script>
    const scrollIntoView = document.querySelector('.scrollIntoView');
    const scrollIntoViewIfNeededTop = document.querySelector('.scrollIntoViewIfNeeded-top');
    const scrollIntoViewIfNeededBottom = document.querySelector('.scrollIntoViewIfNeeded-bottom');
    const test = document.querySelector('.chunk');
    scrollIntoView.addEventListener('click', function() {
      test.scrollIntoView(true);
    });
    scrollIntoViewIfNeededTop.addEventListener('click', function() {
      test.scrollIntoViewIfNeeded(true);
    });
    scrollIntoViewIfNeededBottom.addEventListener('click', function() {
      test.scrollIntoViewIfNeeded(false);
    });
    </script>
</body>复制代码

如文档所说，当红色的div彻底在可视区域的状况下，调用scrollIntoView()是会发生滚动，而调用scrollIntoViewIfNeeded()则不会。而我实践后发现了一些文档没有的细节。当元素处于可视区域，但不是所有可见的状况下，调用scrollIntoViewIfNeeded()时，不管参数是true仍是false，都会发生滚动，并且效果是滚动到元素与可视区域顶部或底部对齐，视乎元素离哪端更近。这个你们须要注意一下~

小结

其实这个API并非必须的，有不少其余方法能够达到它的效果。然而在条件许可的状况下，使用一下是能节省下好多的JS代码或是一堆锚点，仍是很爽的。

感谢各位看官大人看到这里~但愿本文对你有所帮助，记得使用一下这两个API哦！

1. scrollIntoView和scrollIntoViewIfNeeded
2. 锚点与 scrollIntoView()
3. RESTful API - 介绍
4. RESTful API介绍
5. Kubernetes API介绍
6. C++(API介绍)
7. API介绍
8. Instrument API介绍
9. LuaAlchemy API 介绍
10. Dojo-API介绍
更多相关文章...
• 网站主机介绍 - 网站主机教程
• Spring目录结构和基础JAR包介绍 - Spring教程
• Java Agent入门实战（一）-Instrumentation介绍与使用
• Composer 安装与使用