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

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

button.focus();

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

我们预期的目标是:按钮focus,然后无论按钮在不在屏幕显示区内,都不会发现浏览器的滚动重定位。

如何实现呢?

全新的API参数preventScroll

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

button.focus({ 
    preventScroll: true 
});

preventScroll是一个可选参数,默认值是false,表示不阻止聚焦滚动。如果preventScroll参数值是true则表示只聚焦不滚动。

demo页面有两个按钮,一个按钮点击直接focus,另外一个是设置了{preventScroll:true}。

结果最终的效果如下GIF录屏所示:

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

兼容性

preventScroll参数兼容性如下表:

preventScroll参数兼容性

手头没有Safari浏览器,因此兼容性不详,欢迎大家反馈。

IE浏览器下的处理

IE浏览器不支持这个非常棒的API,如果我们要让这个浏览器支持怎么办呢?

方法一:放弃IE/Edge

IE/Egde连自己都放弃自己投奔Chrome了,我们还有什么理由支持他呢!

方法二:polyfill

这里有个人写了个focus的polyfill,

然而,根据我在IE浏览器下的实地使用,有坑,效果很奇怪,因此,上面这个polyfill不建议使用。

方法三:临时补丁

拿垂直滚动距离,我们可以这样JS处理:

var y = window.pageYOffset;
button.focus({ 
    preventScroll: true 
});
// IE浏览器的处理
if (window.pageYOffset != y) {
    setTimeout(function () {
        document.documentElement.scrollTop = y;
    }, 0)
}

但此方法并不完美,有一定概率页面会抖一下。

结语

我在实际项目中的处理方法就是方法一,直接忽略IE浏览器,即使项目要兼容IE浏览器,毕竟是体验增强的东西,使用IE浏览器的用户能够忍受的糟糕体验要比我们预想的大的多,因为IE浏览器本身就是个体验糟糕的产品。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » JS处理元素focus页面不滚动不定位的问题

发表评论