移动端,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 ...
随机推荐
- 如何使用ASP.NET Core、EF Core、ABP(ASP.NET Boilerplate)创建分层的Web应用程序(第一部分)
本文是为了学习ABP的使用,是翻译ABP官方文档的一篇实战教程,我暂时是优先翻译自己感兴趣或者比较想学习的部分,后续有时间希望能将ABP系列翻译出来,除了自己能学习外,有可能的话希望帮助一些英文阅读能 ...
- 云计算openstack共享组件(1)——时间同步服务ntp
一.标准时间讲解 地球分为东西十二个区域,共计 24 个时区 格林威治作为全球标准时间即 (GMT 时间 ),东时区以格林威治时区进行加,而西时区则为减. 地球的轨道并非正圆,在加上自转速度逐年递减, ...
- VUE中使用geetest滑动验证码
一,准备工作:服务端部署 下载文件gt.gs: https://github.com/GeeTeam/gt3-python-sdk 需要说明的是这里的gt.js文件,它用于加载对应的验证JS库. 1. ...
- cat
cat命令能够显示或拼接文件内容,它本身表示conCATenate(拼接) 一般语法 打印单个文件的内容 [root@VM_0_15_centos ~]# cat output.session 打印多 ...
- OO_第二单元总结
第二次总结博客(电梯单元) 16071070 陈泽寅 2019.4.20 一:多线程实验初感 这个单元是多线程设计的实践单元,主要让我们运用多线程的原理与思想去完成一个模拟电梯运行的策略.从最开始的单 ...
- Python——pyqt5——各框架编程
一.日期时间(dateTimeEdit/dateEdit) setDateTime:设置日期(含时间) QDateTime.currentDateTime():当前日期(含时间) setDate:设置 ...
- word里面对齐用Tab键
1 Tab 组1 2 组2
- Oracle字符串行拆分成列的三种方式
Oracle字符串行拆分成列的三种方式 --muphy 开发过程中经常会遇到将前台多个值用逗号连接一同传递到后台查询,这个用逗号连接的字符串分隔的每个字符串分别对应Oracle数据库表的不同行. 如下 ...
- Web开发基础-Node.js-01
01-浏览器工作原理 1)人机交互部分(ui) 2)网络请求部分(socket) 3)javascript引擎 4)渲染引擎(解析html,css) 5)数据存储部分(cookie,本地存储等) -- ...
- 学习STM32F769DK-OTA例程之APP中断向量表重映射
2019-04-17 [小记] APP的IAR工程中的中断向量表偏移是在系统库中的 __iar_program_start 处实现的 启动代码 stm32f769xx.s ;;;;;;;;;;;;;; ...