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. Linux如何在一个文件中写入内容

    Linux中,在一个文件中写入内容,可以vim打开编辑模式,输入我们想要的内容,此次我们使用echo命令 来在一个文件夹中写入内容. echo命令: 第一种: echo 'i love u' > ...

  2. Docker 案例: 在容器中部署静态网站

    ----------------知识点------------ 容器的端口映射: docker  run  [-P] [-p] -P,–publish-all=true | false,大写的P表示为 ...

  3. 定时任务调度工作(学习记录 四)schedule与scheduleAtFixedRate的区别

    根据两种情况来看区别 一.首次计划执行的时间早于当前的时间 1.schedule方法 “fixed-delay”:如果第一次执行时间被延迟了,随后的执行时间按照上一次实际执行完成的时间点进行计算 演示 ...

  4. rabbtimq非持久化测试

    send端代码 import pika,time,threading class send(): def __init__(self,que_nam='hello'): self.credential ...

  5. Linux下的Locale详解

    locale这个单词中文翻译成地区或者地域,其实这个单词包含的意义要宽泛很多.Locale是根据计算机用户所使用的语言,所在国家或者地区,以及当地的文化传统所定义的一个软件运行时的语言环境. loca ...

  6. P1451 求细胞数量

    题目描述 一矩形阵列由数字0到9组成,数字1到9代表细胞,细胞的定义为沿细胞数字上下左右若还是细胞数字则为同一细胞,求给定矩形阵列的细胞个数.(1<=m,n<=100)? 输入输出格式 输 ...

  7. 【洛谷P1129】矩阵游戏

    题目大意:给定一个 N*N 的矩阵,有些格子是 1,其他格子是 0.现在允许交换若干次行和若干次列,求是否可能使得矩阵的主对角线上所有的数字都是1. 题解:首先发现,交换行和交换列之间是相互独立的.主 ...

  8. Mac下查看node等的安装路径

  9. 《Linux下cp XXX1 XXX2的功能》的实现

    <Linux下cp XXX1 XXX2的功能>的实现 一.题目要求 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyC ...

  10. netty的基本介绍

    一.什么是netty?为什么要用netty netty是jboss提供的一个java开源框架,netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可用性的网络服务器和客户端程 ...