黑马程序员技术交流社区
标题: 【成都校区】- 小tips: 元素focus页面不滚动不定位的JS处理 [打印本页]
作者: 小刀葛小伦 时间: 2019-11-9 12:26
标题: 【成都校区】- 小tips: 元素focus页面不滚动不定位的JS处理
一、问题的由来有时候我们希望元素被focus的时候页面不发生滚动，例如我们点击一个按钮打开一个弹框，此时点击弹框中的关闭按钮隐藏弹框后，希望键盘的焦点回到之前的按钮上，我们就会执行如下JavaScript代码：
[JavaScript] 纯文本查看 复制代码
button.focus();
但是有时候会带来另外一个比较严重的体验问题，那就是如果弹框显示之后我们页面发生了滚动，原本点击的按钮跑到了屏幕显示区域之外，这个时候，按钮再次focus的时候就会触发按钮元素scrollIntoView重定位，浏览器发生滚动，表现为突然的跳动，体验很不好。
我们预期的目标是：按钮focus，然后无论按钮在不在屏幕显示区内，都不会发现浏览器的滚动重定位。
如何实现呢？
二、全新的API参数preventScroll如果想要聚焦同时不发生滚动，其实很简单，使用一个全新的API参数preventScroll就可以了，例如：
[JavaScript] 纯文本查看 复制代码
button.focus({
preventScroll: true
});preventScroll是一个可选参数，默认值是false，表示不阻止聚焦滚动。如果preventScroll参数值是true则表示只聚焦不滚动。
兼容性preventScroll参数兼容性如下表：
64+
68+
✘
✘
51+
手头没有Safari浏览器，因此兼容性不详，欢迎大家反馈。
三、IE浏览器下的处理IE浏览器不支持这个非常棒的API，如果我们要让这个浏览器支持怎么办呢？
方法一：放弃IE/EdgeIE/Egde连自己都放弃自己投奔Chrome了，我们还有什么理由支持他呢！
方法二：polyfill然而，根据我在IE浏览器下的实地使用，有坑，效果很奇怪，因此，上面这个polyfill不建议使用。
方法三：临时补丁拿垂直滚动距离，我们可以这样JS处理：
[JavaScript] 纯文本查看 复制代码
var y = window.pageYOffset;
button.focus({
preventScroll: true
});
// IE浏览器的处理
if (window.pageYOffset != y) {
setTimeout(function () {
document.documentElement.scrollTop = y;
}, 0)
}
但此方法并不完美，有一定概率页面会抖一下。
我在实际项目中的处理方法就是方法一，直接忽略IE浏览器，即使项目要兼容IE浏览器，毕竟是体验增强的东西，使用IE浏览器的用户能够忍受的糟糕体验要比我们预想的大的多，因为IE浏览器本身就是个体验糟糕的产品。
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
