React、Vue使用js初始页面将指定内容滑动到可见区域

比如说某一个页面初始进入后需要将某一块内容滑动到可见的区域，这块区域比如说是

<div>我是一个元素，需要进入页面后直接可以看到我，并且我的位置比较靠下已经超出了屏幕的高度</div>

1. 具体实现
   将div上面加一个id比如是box

如果是react可以在useEffect里面写这段代码，如果是vue2需要在mounted里面写这段代码
setTimeout(() => {
  document
    ?.getElementById('box')
    ?.scrollIntoView({ block: 'start', behavior: 'smooth' });
}, 500);

语法参数

示例

var element = document.getElementById("box");
 
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});