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

标签：span   带来   col   就是   元素   style   into   浏览器   屏幕   

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

button.focus();

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

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

button.focus({ 
    preventScroll: true 
});

注：不兼容IE。

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

标签：span   带来   col   就是   元素   style   into   浏览器   屏幕   

原文地址：https://www.cnblogs.com/chao202426/p/11582798.html