元素focus页面不滚动不定位的JS处理

Posted 2022-12-01 chao202426

有时候我们希望元素被focus的时候页面不发生滚动，例如我们点击一个按钮打开一个弹框，此时点击弹框中的关闭按钮隐藏弹框后，希望键盘的焦点回到之前的按钮上，我们就会执行如下javascript代码：

button.focus();

但是有时候会带来另外一个比较严重的体验问题，那就是如果弹框显示之后我们页面发生了滚动，原本点击的按钮跑到了屏幕显示区域之外，这个时候，按钮再次focus的时候就会触发按钮元素scrollIntoView重定位，浏览器发生滚动，表现为突然的跳动

如果想要聚焦同时不发生滚动，其实很简单，使用一个全新的API参数preventScroll就可以了，例如：

button.focus( 
    preventScroll: true 
);

注：不兼容IE。