js 元素滚动到可视区域 软键盘遮挡input

最新推荐文章于 2023-09-17 11:29:22 发布
最新推荐文章于 2023-09-17 11:29:22 发布
阅读量2.3k 收藏
点赞数 1
分类专栏： JavaScript 鸡毛蒜皮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013970232/article/details/106326759
版权

详情请阅读scrollIntoView 与 scrollIntoViewIfNeeded API 介绍

本篇仅记录一些提要

scrollIntoViewIfNeeded, scrollIntoView 都是让当前的元素滚动到浏览器窗口的可视区域内.

scrollIntoView() 接受 Boolean型参数和Object型参数, 默认值 true.Object兼容性差.true 顶对齐; false 底对齐.

scrollIntoViewIfNeeded() 接受 Boolean型参数,只有元素不在可视区域才能生效,在可视区域时没反应. true 垂直居中; false 就近实现顶对齐或底对齐.

end

352328759
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决安卓嵌套H5软键盘遮挡问题以及导航栏遮挡问题
11-15
解决安卓嵌套H5，软键盘遮挡输入框以及页面被华为、小米等底部导航栏遮挡问题
js 实现自动滚动 缓慢滚动元素到可视区域
最新发布
qq_41429765的博客
12-29 1708
​​​​在页面进行滚动元素到可视区域的时候，一般都使用跳转href加#的方式进行锚点定位，但是有缺陷 （1）只适用于整体网页的锚点定位，不能对于某个区域的进行定位滚动 （2）在框架中如果路由使用hash则再使用锚点定位（#）就不起作用了
js scrollIntoView 滚动到元素可视区域
weixin_34261415的博客
10-24 1089
老是忘记这个函数名，记录一下啊 // 滚动到可视区域 document.querySelector(".loading").scrollIntoView()  
js将指定元素滚动到可见区域内的方法。
前端程序猿的博客
05-27 715
【代码】js将指定元素滚动到可见区域内的方法。
js 让点击或指定的元素滚动到浏览器窗口的可视区域内
xiaoboxiaoxing的博客
12-29 2746
js 让点击或指定的元素滚动到浏览器窗口的可视区域内 先上效果图 点击名字之后 点击的元素便会出现在可视区中间 上代码 e.target.scrollIntoView({ block: "center", behavior: "smooth", inline: "center" }) 配置介绍 behavior 可选 定义动画过渡效果， "auto"或 “smooth” 之一。默认为 “auto”。 block 可选 定义垂直方向的对齐， “start”, “center”, “end”, 或 "ne
JS 设置滚动条平滑滚动到显示区域
xyj19990301的博客
09-17 203
"start", "center", "end", 或 "nearest"之一。默认为 "nearest"。"start", "center", "end", 或 "nearest"之一。默认为 "center"。定义缓动动画， "auto", "instant", 或 "smooth" 之一。默认为 "auto"。var d1= document.getElementById(‘显示内容区id值’);
解决Android软键盘弹出覆盖h5页面输入框问题
01-20
1.发现问题：当前页面中box为flex布局，内容为上下固定高，中间自适应（中间区域内容过多会出现滚动条，input框在wrapper的底部），input获取焦点，手机键盘弹出，input未上移到可视区内，怀疑是flex布局导致。...
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
01-19
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。IE中，浏览器显示窗口大小只能以下获取： 代码如下复制代码 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了...
js获取浏览器的可视区域尺寸的实现代码
10-28
js获取浏览器的可视区域尺寸的实现代码，需要的朋友可以参考下。
避免scrollview内部控件输入时被键盘遮挡，监听键盘弹起，配合做滚动
weixin_30544657的博客
06-14 198
1，监听键盘 2，根据当前键盘弹起高度与控件的底部位置计算滑动距离 3，根据滑动距离在键盘弹起和隐藏是分别设置动画完成滑动 实现： 1，监听键盘使用 #pragma mark - 键盘监听-(void)AddObserverForKeyboard{ [[NSNotificationCenter defaultCenter] addObserver:self s...
软键盘弹起遮挡问题
weixin_55513572的博客
02-13 182
企业微信环境中软键盘弹起遮挡输入框等内容
js|虚拟键盘挡住input标签，fixed元素
邓波的博客
09-21 2050
js|虚拟键盘挡住input标签if(/Android [4-6]/.test(navigator.appVersion)) { window.addEventListener("resize", function() { if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName
js手机键盘遮挡_原生JS解决 安卓机 input/textarea输入键盘遮盖输入框
weixin_31198993的博客
01-27 601
问题描述：h5开发时，input/textarea输入框在安卓手机中，获取焦点时，键盘会直接在页面上方弹出，如果你的输入框刚好在页面下方就会被弹出的键盘遮挡，也无法向上滑动使其显示，如下图所示： 解决思路：0.首先需要判断当前机型是否为安卓机(避免影响IOS端)//判断是否是安卓还是iosisAndroid() {let u = navigator.userAgent;let isAndroid ...
js手机键盘遮挡_移动端全键盘弹出遮挡input框
weixin_29424569的博客
01-27 411
之前用vue的时候iphone没事,安卓才会这样,写了一个 vue-directive的绑定.通过的原理是这样,获取当前绑定的input框,在可视窗口里面的top,然后去获取当键盘弹起时的, innerHeight,然后计算下面几种场景,input被键盘全部挡住,input被键盘挡住一部分,正常代码如下 可供参考/*用于解决安卓弹出小键盘导致输入框被挡住的问题*/import Vue from '...
关于xcode模拟器设置_skybeauty_新浪博客
weixin_42205596的博客
05-03 140
1，让模拟器最上面的状态栏消失 将如图选中的地方设置为NO即可 2，为模拟器添加中文输入 先在模拟器中找到设置，即Settings->General->Keyboard->Keyboards->Add New Keyboard... 到了这里大家应该就都明白了，在列表中选择自己需要的输入法，我选择的中文输入法是Chinese-Simplified(PinYin...
js手机键盘遮挡_完美解决手机网页中输入框被输入法遮挡的问题
weixin_35987446的博客
12-30 874
之前要做一个弹出对话框，填写信息，发现在手机上看的时候，较后的输入框在填写信息时，输入框被输入法遮挡，只能盲填。前提1.弹出的对话框用display:fixed定位的2.对话框大小固定解决办法css部分(dlg-top与dlg-bottom为对话框的类，用于确定对话框的定位方式).dlg-top{position: fixed;top:100px;left:10%;}.dlg-bottom{pos...
js－移动端android浏览器中input框被软键盘遮住的问题解决方案
weixin_30505043的博客
04-25 114
我遇到的问题：在一个页面里有一个弹出层之前我给我的最外层加了固定定位 用了下面的方法也不好使；没有办法我将之改为绝对定位层级变高在加上一个顶部标签通过js计算顶部高度来实现满屏遮挡； <section class="sureTweetApply" style="display: none;position: absolute;top: 0;left: 0;width: 100%;hei...
怎么让dom元素自己滚动到可视区域
03-11
可以使用 JavaScript 中的 scrollIntoView() 方法，将需要滚动到可视区域的元素作为参数传入即可。例如： document.getElementById("elementId").scrollIntoView(); 这样就可以让指定的元素自动滚动到可视区域。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值