移动端,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 ...
随机推荐
- 配置sonarqube与gitlab sso认证集成
1.安装插件 sonar插件地址:https://github.com/gabrie-allaigre/sonar-auth-gitlab-plugin 安装插件: 下载插件然后通过maven打包然后 ...
- redis 的过期策略都有哪些?内存淘汰机制都有哪些?
面试题 redis 的过期策略都有哪些?内存淘汰机制都有哪些?手写一下 LRU 代码实现? 面试官心理分析 如果你连这个问题都不知道,上来就懵了,回答不出来,那线上你写代码的时候,想当然的认为写进 r ...
- codeforces#1136E. Nastya Hasn't Written a Legend(二分+线段树)
题目链接: http://codeforces.com/contest/1136/problem/E 题意: 初始有a数组和k数组 有两种操作,一,求l到r的区间和,二,$a_i\pm x$ 并且会有 ...
- 自然人税收管理系统扣缴客户端Sqlite数据库有密码的,如何破解读取呢
https://www.cnblogs.com/Charltsing/p/EPPortal.html 有人问我能不能直接读自然人税收管理系统扣缴客户端,因为需要导出数据做处理. 看了一下,这个客户端是 ...
- 【问题解决方案】Github中的jupyter notebook文件(.ipynb)加载失败/失败
两个方法: 法一:本机安装jupyter notebook的情况下直接下载文件并打开 本机打开的话会在浏览器中显示,地址为localhost:8888,也就是本机 法二:在线打开:利用 'https: ...
- c++使用cmake创建dpdk项目
使用cmake创建dpdk 特别注意的时,链接dpdk库时,一定要使用 -Wl,--whole-archive 和 -Wl,--no-whole-archive 包含所有的静态库,注意,不要链接 li ...
- 【zabbix教程系列】三、zabbix 3.4 在centos 7 上安装详细步骤
一.环境准备 [root@ltt01 ~]# ip a : lo: <LOOPBACK,UP,LOWER_UP> mtu qdisc noqueue state UNKNOWN qlen ...
- Tomcat不需要输入项目名便可访问项目(直接用域名或者ip)
一般需要输入项目名访问项目是怎么个方法呢? 直接将项目放在 tomcat 安装目录的 webapps 目录下, 然后在域名或者ip后面 域名(ip)/项目目录, 这样会显得比较麻烦. 那么应该怎么才可 ...
- 微信公众号开发之access_token的全局共用
最近做微信公众号开发,涉及到access_token的缓存问题(避免各自的应用都去取access_token,同时解决微信 appid和appsecret的安全问题),在通用权限管理系统底层增加了实现 ...
- 爬虫四大金刚:requests,selenium,BeautifulSoup,Scrapy
一.简介爬虫 1.什么是爬虫 #1.什么是互联网? 互联网是由网络设备(网线,路由器,交换机,防火墙等等)和一台台计算机连接而成,像一张网一样. #2.互联网建立的目的? 互联网的核心价值在于数据的共 ...