移动端,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 ...
随机推荐
- Jquery mobile中用Jquery的append()追加的内容没有Jquery mobile的样式
Jquery Mobile 动态添加块之后, 样式不是JM内定的样式,解决方案如下: $('#content').append(html).enhanceWithin();//Jquery Mobil ...
- MarkDownPad2基本语法
一.换行和空格 (1)换行 行尾加两个空格 (2)空格 二.标题 在#后跟个空格再写文字,一个#是一级标题,两个#是二级标题,以此类推,支持六级标题. 示例: # 一级标题 ...
- JavaScript加载次序问题
3个文件,一个index.html如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...
- spring整合quartz异常:org.quartz.JobPersistenceException: Couldn't clean volatile data: Unknown column 'IS_VOLATILE' in 'where clause'
自己的SSM项目中要用到定时器,初期使用Timer,后来用spring 的schedule,都比较简单,所以功能比较单一.后来就研究quartz,准备整合到项目中.遇到了异常,异常内容如下: [201 ...
- yarn 在Vue框架中的常用命令
初始化项目 yarn add init 安装vue yarn add vue 安装webpack,webpack-dev-server(是一个小型的Node.js Express服务器) yarn a ...
- Git diff 统计代码更改数量
1. git diff HEAD~2 获取最近两次提交的具体不同 包括增删的文件以及行数以及每行具体的改动 2. git diff --stat 获取文件更改的个数 增加行数 删除行数 3. git ...
- CSS绝对定位元素居中的几种方法
转载自-CSS居中绝对https://www.cnblogs.com/skura23/p/6530556.html 作者:PajamaCat 1,div宽度未知1 <body> <d ...
- python调用openstack的api,create_instance的程序解析
python调用openstack的api,create_instance的程序解析 2017年10月17日 15:27:24 CloudXli 阅读数:848 版权声明:本文为博主原创文章,未经 ...
- Redis读取出错,JSON序列化的问题
报错 org.springframework.web.util.NestedServletException: Request processing failed; nested exception ...
- 实用HTML5游戏资源
awesome games Web-First游戏引擎协同构建令人惊叹的HTML5可视化和游戏 HTML5游戏开发者和技术传播者,华沙,波兰- @EnclaveGames独立工作室的创始人 代表作 ...