1、scrollIntoView

//这个title-part元素将以平滑的滚动方式滚动到与视口底部齐平地方（有兼容性问题）
document.querySelector("#title-part").scrollIntoView({
    block: 'end',
    behavior: 'smooth' 
})
 
//这个article-part元素将以平滑的滚动方式滚动到与视口顶部齐平地方（有兼容性问题）
document.querySelector("#article-part").scrollIntoView({
    block: 'start',
    behavior: 'smooth'
})
 
//这个articleMU-part元素将木讷的瞬间滚动到与视口顶部齐平地方（无滚动动画效果）
document.querySelector("#articleMU-part").scrollIntoView();//默认值就是true,可以不写
 
//这个titleMU-part元素将木讷的瞬间滚动到与视口底部齐平地方（无滚动动画效果）
document.querySelector("#titleMU-part").scrollIntoView(false)

2、IntersectionObserver

图片来源，阮一峰的博客

IntersectionObserver接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。

构造器

IntersectionObserver.IntersectionObserver()

创建一个新的IntersectionObserver对象，当其监听到目标元素的可见部分穿过了一个或多个阈(thresholds) 时，会执行指定的回调函数。

    var io = new IntersectionObserver(callback, option);

构造函数的返回值是一个观察器实例。实例的observe方法可以指定观察哪个 DOM 节点。如下的开始观察

// 开始观察
io.observe(document.getElementById('example'));
// 观察多个对象
io.observe(document.getElementById('example2'));
// 停止观察某个对象
io.unobserve(element);
// 关闭观察器
io.disconnect();

callback

目标元素的可见性变化时，就会调用观察器的回调函数callback。
一般会触发两次。一次是目标元素刚刚进入视口（开始可见），另一次是完全离开视口（开始不可见）。

    var io = new IntersectionObserver(
      entries => {
        console.log(entries);
      }
    );

entries是一个数字，每个成员都是一个IntersectionObserverEntry对象。举例来说，如果同时有两个被观察的对象的可见性发生变化，entries数组就会有两个成员。

Option 对象

IntersectionObserver构造函数的第二个参数是一个配置对象。它可以设置以下属性。

threshold 属性 threshold属性决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，即交叉比例（intersectionRatio）达到0时触发回调函数。

    new IntersectionObserver(
      entries => {/* ... */}, 
      {
        threshold: [0, 0.25, 0.5, 0.75, 1]
      }
    );

就表示当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。

root 属性，rootMargin 属性很多时候，目标元素不仅会随着窗口滚动，还会在容器里面滚动（比如在iframe窗口里滚动）。容器内滚动也会影响目标元素的可见性，参见本文开始时的那张示意图。

IntersectionObserver API 支持容器内滚动。root属性指定目标元素所在的容器节点（即根元素）。注意，容器元素必须是目标元素的祖先节点。


    var opts = { 
      root: document.querySelector('.container'),
      rootMargin: "500px 0px" 
    };

    var observer = new IntersectionObserver(
      callback,
      opts
    );

上面代码中，除了root属性，还有rootMargin属性。后者定义根元素的margin，用来扩展或缩小rootBounds这个矩形的大小，从而影响intersectionRect交叉区域的大小。它使用CSS的定义方法，比如10px 20px 30px 40px，表示 top、right、bottom 和 left 四个方向的值。

本文主要来自复制阮一峰的教程，用来记录下知识点。

最后附上MND的地址和阮一峰的专题地址： developer.mozilla.org/zh-CN/docs/… www.ruanyifeng.com/blog/2016/1…

前端不常用，但必须了解的知识点

1、scrollIntoView

2、IntersectionObserver

构造器

callback

Option 对象