1、一般情况下

在移动端,点击input框之后,会弹出输入键盘。而内容input的内容也会自动滚动到可视区域内。

2、当父元素设置了overflow属性之后

在设置了overflow属性之后,点击input框之后,input却无法滚动到可视区域内,在此情况下,我们应该怎么做呢。

3、解决方案

1、父元素不要应用overflow属性

2、手动滚动当前活动元素滚动至可视区域

通过scrollIntoViewscrollIntoViewIfNeeded这两个api可使元素滚动至可视区域

如下是我的解决方案:
~~~
const h = document.body.scrollHeight;
window.onresize = function() {
if (document.body.scrollHeight < h) {
setTimeout(() => {
document.activeElement.scrollIntoView({ behavior: "smooth" });
});
}
};
~~~

移动端,input、textarea滚动至可视区域的更多相关文章

  1. input聚焦时,滚动至可视区域

    这里的代码来自vux,觉得vux处理得很好,在此记录一下. 当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是, ...

  2. vue input聚焦时,滚动至可视区域

    这里的代码来自vux,觉得vux处理得很好,在此记录一下.当我们在手机上填表单的时候,我们会希望正在填的input或者textarea会自动滚动至可视区域,方便我们边填写边查看内容.以前我的做法是,获 ...

  3. js 判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方。

    前言:最近工作中,有这样一个场景,判断一个元素是否在滚动的可视区域内,不在就固定到可视区域的上方.为了以后再次遇到,所以记录下来,并分享.转载请注明出处:https://www.cnblogs.com ...

  4. js滚动及可视区域的相关的操作

    element.getBoundingClientRect 判断指定元素相对于页面可视窗口的位置信息,通常结合windows.onScroll方法使用,当element.getBoundingClie ...

  5. js scrollIntoView 滚动到元素可视区域

    老是忘记这个函数名,记录一下啊 // 滚动到可视区域 document.querySelector(".loading").scrollIntoView()

  6. 移动端input“输入框”常见问题及解决方法

    转自 https://www.cnblogs.com/ljx20180807/p/9837748.html 1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱: 当页input存在 ...

  7. scrollIntoView 前的元素滚动到浏览器窗口的可视区域内 不止垂直滚动,还有水平滚动

    Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoVi ...

  8. 转 移动端-webkit-user-select:none导致input/textarea输入框无法输入

    移动端webview中写页面的时候发现个别Android机型会导致input.textareat输入框无法输入(键盘可以弹起,不是webView.requestFocus(View.FOCUS_DOW ...

  9. js检测页面上一个元素是否已经滚动到了屏幕的可视区域内

    应用场景:只要页面加载了,其中在页面中出现的li就向控制台输出第几个发送请求:在本次加载的页面中,再将滚动条滚回前边的li,不再向控制台输出东西,也就是说已经显示过的li,不再向控制台输出东西. &l ...

随机推荐

  1. 配置sonarqube与gitlab sso认证集成

    1.安装插件 sonar插件地址:https://github.com/gabrie-allaigre/sonar-auth-gitlab-plugin 安装插件: 下载插件然后通过maven打包然后 ...

  2. redis 的过期策略都有哪些?内存淘汰机制都有哪些?

    面试题 redis 的过期策略都有哪些?内存淘汰机制都有哪些?手写一下 LRU 代码实现? 面试官心理分析 如果你连这个问题都不知道,上来就懵了,回答不出来,那线上你写代码的时候,想当然的认为写进 r ...

  3. codeforces#1136E. Nastya Hasn't Written a Legend(二分+线段树)

    题目链接: http://codeforces.com/contest/1136/problem/E 题意: 初始有a数组和k数组 有两种操作,一,求l到r的区间和,二,$a_i\pm x$ 并且会有 ...

  4. 自然人税收管理系统扣缴客户端Sqlite数据库有密码的,如何破解读取呢

    https://www.cnblogs.com/Charltsing/p/EPPortal.html 有人问我能不能直接读自然人税收管理系统扣缴客户端,因为需要导出数据做处理. 看了一下,这个客户端是 ...

  5. 【问题解决方案】Github中的jupyter notebook文件(.ipynb)加载失败/失败

    两个方法: 法一:本机安装jupyter notebook的情况下直接下载文件并打开 本机打开的话会在浏览器中显示,地址为localhost:8888,也就是本机 法二:在线打开:利用 'https: ...

  6. c++使用cmake创建dpdk项目

    使用cmake创建dpdk 特别注意的时,链接dpdk库时,一定要使用 -Wl,--whole-archive 和 -Wl,--no-whole-archive 包含所有的静态库,注意,不要链接 li ...

  7. 【zabbix教程系列】三、zabbix 3.4 在centos 7 上安装详细步骤

    一.环境准备 [root@ltt01 ~]# ip a : lo: <LOOPBACK,UP,LOWER_UP> mtu qdisc noqueue state UNKNOWN qlen ...

  8. Tomcat不需要输入项目名便可访问项目(直接用域名或者ip)

    一般需要输入项目名访问项目是怎么个方法呢? 直接将项目放在 tomcat 安装目录的 webapps 目录下, 然后在域名或者ip后面 域名(ip)/项目目录, 这样会显得比较麻烦. 那么应该怎么才可 ...

  9. 微信公众号开发之access_token的全局共用

    最近做微信公众号开发,涉及到access_token的缓存问题(避免各自的应用都去取access_token,同时解决微信 appid和appsecret的安全问题),在通用权限管理系统底层增加了实现 ...

  10. 爬虫四大金刚:requests,selenium,BeautifulSoup,Scrapy

    一.简介爬虫 1.什么是爬虫 #1.什么是互联网? 互联网是由网络设备(网线,路由器,交换机,防火墙等等)和一台台计算机连接而成,像一张网一样. #2.互联网建立的目的? 互联网的核心价值在于数据的共 ...