移动端,input、textarea滚动至可视区域
1、一般情况下
在移动端,点击input框之后,会弹出输入键盘。而内容input的内容也会自动滚动到可视区域内。
2、当父元素设置了overflow属性之后
在设置了overflow属性之后,点击input框之后,input却无法滚动到可视区域内,在此情况下,我们应该怎么做呢。
3、解决方案
1、父元素不要应用overflow属性
2、手动滚动当前活动元素滚动至可视区域
通过scrollIntoView
或scrollIntoViewIfNeeded
这两个api可使元素滚动至可视区域
如下是我的解决方案:
~~~
const h = document.body.scrollHeight;
window.onresize = function() {
if (document.body.scrollHeight < h) {
setTimeout(() => {
document.activeElement.scrollIntoView({ behavior: "smooth" });
});
}
};
~~~
移动端,input、textarea滚动至可视区域的更多相关文章
- input聚焦时,滚动至可视区域
这里的代码来自vux,觉得vux处理得很好,在此记录一下. 当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是, ...
- vue input聚焦时,滚动至可视区域
这里的代码来自vux,觉得vux处理得很好,在此记录一下.当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是,获 ...
- js 判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方。
前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...
- js滚动及可视区域的相关的操作
element.getBoundingClientRect 判断指定元素相对于页面可视窗口的位置信息,通常结合windows.onScroll方法使用,当element.getBoundingClie ...
- js scrollIntoView 滚动到元素可视区域
老是忘记这个函数名,记录一下啊 // 滚动到可视区域 document.querySelector(".loading").scrollIntoView()
- 移动端input“输入框”常见问题及解决方法
转自 https://www.cnblogs.com/ljx20180807/p/9837748.html 1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱: 当页input存在 ...
- scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动,还有水平滚动
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoVi ...
- 转 移动端-webkit-user-select:none导致input/textarea输入框无法输入
移动端webview中写页面的时候发现个别Android机型会导致input.textareat输入框无法输入(键盘可以弹起,不是webView.requestFocus(View.FOCUS_DOW ...
- js检测页面上一个元素是否已经滚动到了屏幕的可视区域内
应用场景:只要页面加载了,其中在页面中出现的li就向控制台输出第几个发送请求:在本次加载的页面中,再将滚动条滚回前边的li,不再向控制台输出东西,也就是说已经显示过的li,不再向控制台输出东西. &l ...
随机推荐
- array_map、array_walk、array_reduce
不同情境下替换foreach,且效果更佳 array_map 遍历原数组,array_map()参数中有几个数组,自定义函数就接收几个参数, 在每个值上进行自定义函数处理,具有返回值,需要一个新数组 ...
- [Cordova inAppBrowser 在App内打开浏览器]
方案1: 使用Cordova插件 cordova-plugin-inappbrowser 1. 添加插件 cordova plugin add cordova-plugin-inappbrowser ...
- CSS3 移动端 1PX 线变成0.5PX
.line1 {position:relative} .line1:after {content:'';position:absolute;bottom:0;left:0;width:100%;hei ...
- CnPack IDE 专家包(CnWizards)显示代引用单元列表
CnWizards_1.1.3.896
- Python——代码汇总
1.三级菜单 2.Windows启动服务 3.常用的Python实现 4.字典的基本操作
- 第六届SD省赛 Circle of Friends
Circle of Friends Time Limit: 2000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descr ...
- 工厂模式如何返回Spring的Bean
工厂返回的可以是一个具体的对象,比如造一辆车,可以返回一个自行车对象,或者汽车对象. 但是在Spring 中需要工厂返回一个具体的Service,这就是一个抽象工厂了 一种方法是反射,个人觉得这种方式 ...
- python 2.x 与3.x 的区别总结
宏观上:2.x 源码不规范,混乱,冗余. 3.x 源码优美清晰,统一标准,去除了冗余. 默认编码方式:2.x ASCII码 3.x UTF-8 用2.x 处理中文时,需要声明编码方式(由于cmd ...
- MySQL单表查询
MySQL之单表查询 创建表 # 创建表 mysql> create table company.employee5( id int primary key AUTO_INCREMENT not ...
- python学习day22 面向对象(四) 约束&反射
1.栈与队列 栈:类似弹夹,先进后出 队列:类似水管,先进先出 class Stack(object): """ 先进后出 """ def ...