js控制滚动方法

1.原生

(1) dom.scrollTop

let height = xxx;
let element = document.getElementById(`father`);
element.scrollTop = height;

想要添加平滑滚动效果，可在css中添加 scroll-behavior: smooth;(注意版本兼容，下图是版本兼容情况)

scroll1.png

（2) dom.scroll()

let height = xxx;
let element = document.getElementById(`father`);
element.scroll({
   top: height, //向上移动的距离，
   behavior: "smooth", // 平滑滚动
 });

IE11不太兼容，报错[Vue warn]: Error in v-on handler: "TypeError: 对象不支持“scroll”属性或方法"

（3) dom.scrollIntoView()

document.querySelector("father").scrollIntoView({
     behavior: "smooth" // 平滑滚动
  });

坑: 元素显示会页面上移

网上搜索了几种方案：
(a) 添加block、inline属性
添加完确实不上移，但是影响正常的滚动功能，不知道是不是我用错了方法，后续有时间再去验证

document.querySelector("father").scrollIntoView({
    behavior: "smooth", // 平滑滚动
    block: "nearest",
    inline: "start",
 });

(b）添加position:fixed
脱离文档流，相对于浏览器定位，但是对于一些宽度需要计算的div不友好

 div {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

（4) IntersectionObserver()交叉观察器

 // 监听滚动
const elements = document.getElementsByClassName("div");
const observer = new IntersectionObserver(this.visibleChange, {
   rootMargin: "80px 0px 0px 0px",
 });
Array.from(elements, (item) => observer.observe(item));

const visibleChange = (item) => {
   item.forEach((observe) => {
     const id = observe.target.getAttribute("id"),
           anchor = document.querySelector(`查找对象的id`);
     if (!anchor) return false;
     // 监听对象出现
     if (observe.isIntersecting) {
         //.......处理函数
         return;
      }
   });
 }

存在兼容性问题，得安装补丁文件 npm install intersection-observer --save，页面引入require('intersection-observer');

有兴趣的可去这篇文章阅读一下哦：https://blog.csdn.net/fmk1023/article/details/122475012