移动端,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 ...
随机推荐
- 【原创】从Rest到Graphql
引言 开局两张图,内容全靠编- ok,如图所示,我在去年曾经写过一篇文章<闲侃前后端分离的必要性>.嗯,我知道肯定很多人没看过.所以我做一个总结,其实啰里八嗦了一篇文章,就是想说一下现在的 ...
- JDK8中HashMap
引用别人的一句话: JDK1.6,JDK1.7中,HashMap采用位桶+链表实现,即使用链表处理冲突,同一hash值的链表都存储在一个链表里.但是当位于一个桶中的元素较多,即hash值相等的元素较多 ...
- 02-Django框架介绍
02-Django框架介绍 1.MVC框架介绍 MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式 具有耦合性低.重用性高.生 ...
- codeforces#1152C. Neko does Maths(最小公倍数)
题目链接: http://codeforces.com/contest/1152/problem/C 题意: 给出两个数$a$和$b$ 找一个$k(k\geq 0)$得到最小的$LCM(a+k,b+k ...
- Java导出压缩包工具类
/** * @Title: exportZip * @Description:TODO(导出建压缩文件) * @param delAdviceinfo 为项目实体类 * @date 2018年4月4日 ...
- HashMap源码解读(jdk1.8)
1.相关常量 默认初始化容量(大小) static final int DEFAULT_INITIAL_CAPACITY = 1 << 4; 最大容量 static final int M ...
- BigDecimal(大浮点数)
因为这个单词,和他的四则运算方法总是记不住,所以写入博客,在没有印象的时候再看看自己的博客. BigDecimal的加减乘除不和double float 一样,他需要使用方法来进行加减乘除. 加法:a ...
- IOS 选择会员资格
选择会员资格 针对所有 Apple 平台进行开发从未如此简单.要开始为 macOS.iOS.tvOS 和 watchOS 开发 app,请从 Mac App Store 下载 Xcode.如果您已准备 ...
- 开启ucosii的移植之旅
开启ucosii的移植之旅: 4.6.1.移植和硬件平台的关系 (1)只要是cortex-m3内核内核的soc移植差异都不大. 同内核同soc的不同开发板移植差异都不大. 不同内核的开发板移植难度大, ...
- luogu4166 最大土地面积 (旋转卡壳)
首先这样的点一定在凸包上 然后旋转卡壳就可以 具体来说,枚举对角线的一个端点,另一个端点在凸包上转,剩下两个点就是一个叉积最大一个最小,而这两个点也是跟着转的 所以是$O(N^2)$ #include ...