当前位置: 首页 > news >正文

IOS评论框不贴底(ios12新bug)

结构如下

我们需要做的就是当聚焦评论框的时候,ios需要让键盘顶起评论框。在ios系统中,当键盘弹起的时候,会挤压页面,评论框会自然在顶部,但是有个问题就是,下面的评论框会不贴底,露出下面的东西,所以在ios12之前的解决办法就是在评论框触发focus的时候让页面滚动到底部,代码如下:

const body = document.dcumentElement.scrollTop ? document.documentELement : document.body;
const {scrollHeight, scrollTop} = body;
const innerHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
body.scrollTop = scrollHeight - innerHeight;

如果输入框失去焦点,就让页面滚动到先前的位置。
代码如下:

body.scrollTop = scrollTop; // 滚动到先前的位置

这种方案在ios12上会出现两个问题:
<ul>
<li>如果在页面底部吊起输入框,输入框会被键盘挡住</li>
<li>如果在页面中部,行为会变得很奇怪,即使我们用了上面的方法,输入框会不贴底,众所周知在输入的时候,fixed定位会生效,即使我们禁用了touchmove事件,还是能够滚动</li>
</ul>
所以针对这些问题,我先试了网上这种据说通用的解决方法:
scrollIntoView这种方法,但是报错了,没有这个方法。

然后我自己分析了一下这个问题,出现各种情况的原因是因为弹出键盘时,页面能够滚动,于是就出现了各种问题,那干脆让页面无法滚动。ios11及之前使用了下面的布局:

.parent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

并且禁止了touchmove事件,这样能够让页面无法滚动,但是ios12并没有什么卵用。还是能够滚动,那咱们就让内容就一屏,多的被截掉。下面是输入框focus的代码:

const {scrollHeight,scrollTop} = body;
const innerHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
body.style.height = `${innerHeight}px`;
body.style.overflow = 'hidden';

然后就是输入框触发blur事件时的代码:

body.style.height = `${scrollHeight}px`;
body.style.overflow = 'auto';
body.style.scrollTop = scrollTop;

在这里需要重新设置body的高度,高度为之前获取的scrollHeight,因为我们需要重新滚动到先前的位置,建议不要设置heightauto,因为在一些场景下我们可能需要监听滚动事件,会出现其他的问题(稳战稳打才能打胜仗)。然后重新设置bodyoverflow,让页面能够滚动,最后滚动到先前的位置。

相关文章:

  • iOS点击获取短信验证码按钮
  • 快速开始Python/WSGI应用程序
  • JavaScript原生实现《贪吃蛇》
  • JPA关系映射系列二:one-to-one主键关联
  • CSS选择器——伪元素选择器之处理父元素高度及外边距溢出
  • 有了这四个“最”,AI或许可以成功预测地震
  • JS设计模式之工厂模式
  • Web前端开发必备手册(Cheat sheet)
  • 如何在招聘中考核.NET架构师
  • 《ActiveMQ 系列》- HelloWorld
  • SSM-Spring-02:Spring的DI初步加俩个实例
  • DOM的那些事
  • 【mysql】count(*),count(1)与count(column)区别
  • 北塔软件:BI+AI+DI,做IT运维数据掘金的使能者
  • 秋季学期学习总结
  • [LeetCode] Wiggle Sort
  • bearychat的java client
  • Cookie 在前端中的实践
  • java8 Stream Pipelines 浅析
  • JavaSE小实践1:Java爬取斗图网站的所有表情包
  • leetcode386. Lexicographical Numbers
  • Odoo domain写法及运用
  • Redux 中间件分析
  • spark本地环境的搭建到运行第一个spark程序
  • Spring-boot 启动时碰到的错误
  • tab.js分享及浏览器兼容性问题汇总
  • vue2.0一起在懵逼的海洋里越陷越深(四)
  • vue从入门到进阶:计算属性computed与侦听器watch(三)
  • 创建一种深思熟虑的文化
  • 聊聊flink的TableFactory
  • 如何设计一个微型分布式架构?
  • 删除表内多余的重复数据
  • 实习面试笔记
  • 为物联网而生:高性能时间序列数据库HiTSDB商业化首发!
  • ​LeetCode解法汇总307. 区域和检索 - 数组可修改
  • ​sqlite3 --- SQLite 数据库 DB-API 2.0 接口模块​
  • # 飞书APP集成平台-数字化落地
  • #、%和$符号在OGNL表达式中经常出现
  • #etcd#安装时出错
  • $$$$GB2312-80区位编码表$$$$
  • (C#)Windows Shell 外壳编程系列9 - QueryInfo 扩展提示
  • (pojstep1.1.2)2654(直叙式模拟)
  • (Python) SOAP Web Service (HTTP POST)
  • (Spark3.2.0)Spark SQL 初探: 使用大数据分析2000万KF数据
  • (TOJ2804)Even? Odd?
  • (附源码)基于SSM多源异构数据关联技术构建智能校园-计算机毕设 64366
  • (论文阅读32/100)Flowing convnets for human pose estimation in videos
  • (淘宝无限适配)手机端rem布局详解(转载非原创)
  • .NET Core实战项目之CMS 第十二章 开发篇-Dapper封装CURD及仓储代码生成器实现
  • .net framwork4.6操作MySQL报错Character set ‘utf8mb3‘ is not supported 解决方法
  • .NET LINQ 通常分 Syntax Query 和Syntax Method
  • .net 前台table如何加一列下拉框_如何用Word编辑参考文献
  • .net利用SQLBulkCopy进行数据库之间的大批量数据传递
  • /proc/vmstat 详解
  • [ C++ ] 继承