zoukankan      html  css  js  c++  java
  • 元素focus页面不滚动不定位的JS处理

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

    button.focus();

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

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

    button.focus({ 
        preventScroll: true 
    });

    注:不兼容IE。

  • 相关阅读:
    idea database testconnection 显示灰色
    idea tomcat热部署
    idea 常见报错问题 记录
    Python-Basis-22th
    Python-Basis-21th
    Python-Basis-20th
    Python-Basis-19th
    Python-Basis-18th
    Python-Basis-17th
    Python-Basis-16th
  • 原文地址:https://www.cnblogs.com/chao202426/p/11582798.html
Copyright © 2011-2022 走看看