博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
scrollIntoView与键盘遮挡
阅读量:7250 次
发布时间:2019-06-29

本文共 470 字,大约阅读时间需要 1 分钟。

开始

最近碰到h5页键盘遮挡输入框,很是头痛,后发现一个很有用的api方法,可以解决,就是scrollIntoView。

根据 的描述,Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。

兼容性

光看兼容性,可以看出兼容性很不错,特别实在移动端,适用性高。可以放心使用

用法

1.true:如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。这是这个参数的默认值。

2.false,元素的底端将和其所在滚动区的可视区域的底端对齐

之后是Object型参数,这个对象有两个选项,也就是对象里面的key。block与之前的Boolean型参数一致,不过值不再是true和false,是更语义化的start和end。 另一个选项是behavior,MDN上给出三个可取的值,分别是auto、instant与smooth。这个选项决定页面是如何滚动的,实测auto与instant都是瞬间跳到相应的位置

实际应用

1.实现键盘遮挡输入框

2.代替锚点功能
3.聊天栏最新消息出现在可视区
等等

转载地址:http://mahbm.baihongyu.com/

你可能感兴趣的文章
java笔记--笔试中极容易出错的表达式的陷阱
查看>>
第140天:前端开发中浏览器兼容性问题总结(一)
查看>>
socket编程的select模型
查看>>
智能医疗的春天在哪里?
查看>>
Kali Linux 无线渗透测试入门指南 第二章 WLAN 和固有的不安全性
查看>>
MyExcel 2.1.2 版本发布,重要 Bug 修复
查看>>
广汽与蔚来达成合作,将共同投资12.8亿元创立新能源汽车公司
查看>>
量子力学,整合了三种自然相互作用力
查看>>
亚马逊新专利,让无人机运送充电器为电动车充电
查看>>
HTC将Viveport推向全球,这是要“反击”Valve的节奏?
查看>>
【深度学习不是犯罪】欧盟祭出最严数据保护法:专家解读 GDPR
查看>>
浅谈SQL Server 对于内存的管理
查看>>
喜报销发布V2.4,圣诞焕新装,新增“专项费用报销”审批,集成京东商城
查看>>
陈天奇团队新研究:自动优化深度学习工作负载
查看>>
你的无人机快递来了?小心被查“水表”
查看>>
收录 Uboot 详解
查看>>
MongoDB数据库的索引操作(转)
查看>>
线程的实现
查看>>
重建日志文件
查看>>
鱼鹰软件荣获“北京广告产业发展30周年”杰出贡献单位奖
查看>>