编程那点事编程那点事

专注编程入门及提高
探究程序员职业规划之道!

JavaScript获取焦点屏幕不滚动

输入元素获得输入焦点

document.getElemeentById('myinput').focus();

通过观察发现,元素如果是在屏幕可视范围之外,使用以上的代码获得焦点后,当前页面的滚动条会立即滚动到目标元素的位置,这在表单输入及控制时,能带来一定的便利性。

但在开发自定义功能组件时,会自动滚动到目标位置的特性却会为开发者带来困扰,例如一个组件以弹出层的形式展现,弹出层中带有一个输入元素,插件希望在展示完成弹出层后,使得输入元素获得焦点;这时,如果插件的弹出层显示位置在屏幕可视区域之外,页面会自动滚动到页面顶部,造成操作开发上的困难

实际上 focus 方法是可以带有设置参数的(ie9+兼容)

element.focus(focusOption); // Object 类型的参数

设置参数内容 preventScroll Boolean

  • false (默认) - 会将屏幕滚动到元素的位置

  • true - 保持当前屏幕位置不动

document.getElemeentById('myinput').focus({preventScroll:true});

使用以上方式后,元素获得了输入焦点,但不会使得屏幕位置发生变化

未经允许不得转载: 技术文章 » javascript » JavaScript获取焦点屏幕不滚动