fullpage 中输入框弹起 页面上移问题处理
fullpage页面要是有输入框的话 点击输入框 键盘弹出的时候会把输入框也顶起来 页面就会向上移 但是键盘收回的时候页面还是上移的状态
对于这个问题只在android手机上出现 为了解决这个问题 我想到一个方法
fullpagejs 会自动在页面生成一个类名为 fp-section 的外层标签 只需在键盘弹出的时候改变这个div的位置 向上移一定百分比 键盘收回的时候返回原来位置就可以
下面是代码
//判断是否是android
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
//android处理输入框问题
if (isAndroid) {
var clientHeight = document.documentElement.clientHeight || document.body.clientHeight; //最初进来的窗口高度
$(window).on('resize', function() {
var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight; //变化后窗口的高度
if (clientHeight > nowClientHeight) {
//键盘弹出事件处理
$('.fp-section').css('top', '-28%');
} else {
//键盘收起事件处理
$('.fp-section').css('top', '0');
}
});
}
fullpage 中输入框弹起 页面上移问题处理的更多相关文章
- fastclick使用与 fastclick ios11.3相关bug原因(ios输入框点击变得不灵敏,ios input失焦后,页面上移,点击不了)
FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,就有了FastClick. 安装fastc ...
- AppBox v6.0中实现子页面和父页面的复杂交互
前言 1. AppBox是捐赠开源(获取源代码至少需要捐赠作者 1 元钱),基于的 FineUI(开源版)则是完整开源,网址:http://fineui.codeplex.com/ 2. 你可以通过捐 ...
- 移动端-解决ios连续点击页面上移问题
引入js即可 //解决ios双击页面上移问题//在项目中测试不紧input/button这些表单控件有这个问题,p,div等也有问题,于是乎就直接在body开刀了(function(){ var ag ...
- 解决ios双击页面上移问题
做webapp时,ios有个默认双击事件,会缩放页面,并将当前点击的位置居中到屏幕,本来也没什么,但是当页面中有fixed定位的元素时,这时候你就会神奇的发现,fixed元素所见不所得了! 还有就是页 ...
- 聊天界面使用IQKeyboardManager导航栏及整个页面上移的解决方法
问题: 使用第三方库IQKeyboardManager时会使整个页面上移,导航栏页偏移出了显示范围.在聊天界面就会使得上面的消息看不到. 解决方法: 首先说明:在聊天界面使用IQKeyboardMan ...
- fullpage中高度错误的解决方法
今天我再用fullpage写全屏页面的时候,发现在ie中,一整屏的页面总是不能铺满,高度总是少一截儿,各种搜索,找到了个合适的方法,这里记录下,也希望给之后遇到这个问题的人提供一种方式,当然不一定能解 ...
- Chrome中输入框默认样式移除
Chrome中输入框默认样式移除 在chrome浏览器中会默认给页面上的输入框如input.textarea等渲染浏览器自带的边框效果 IE8中效果如下: Chrome中效果如下: 这在我们未给输 ...
- React-Native 之 GD (二十)removeClippedSubviews / modal放置的顺序 / Android 加载git图\动图 / 去除 Android 中输入框的下划线 / navigationBar
1.removeClippedSubviews 用于提升大列表的滚动性能.需要给行容器添加样式overflow:’hidden’.(Android已默认添加此样式)此属性默认开启 这个属性是因为在早期 ...
- Html中设置访问页面不在后进行其他页面跳转
Html中设置访问页面不在后进行其他页面跳转 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
随机推荐
- openGL学习----相机
0.参考:https://learnopengl-cn.github.io/01%20Getting%20started/09%20Camera/ 0.0其实相机就是搞清楚cameraPos,came ...
- BIOS备忘录之IIC(touchpad)设备
简述BIOS中对IIC device的支持,以touchpad为例. 信息收集 收集平台的硬件信息: 1. IIC controller number(PCH一般包含多个controller,我们使用 ...
- WDCP面板Web环境安装redis与phpredis扩展应用方法
http://www.ctyun.cn/bbs/thread-2882-1-1.html根据网友的要求需要在WDCP面板环境中安装人人商城程序,但是这个程序需要支持redis与phpredis扩展.根 ...
- Docker Kubernetes 高可用架构设计
Docker Kubernetes 高可用架构设计 官方方案:保证master端不发生单点故障. 官方使用一台Load Balancer负载均衡代理3台master端,终端与etcd与work Nod ...
- Python 缓存服务
缓存服务:mongodb.redis.memcache mongodb:早期的缓存系统,直接持久话,数据即存内存也同步到硬盘. redis:主流缓存系统,半持久化,默认存在内存,需要手动调用存在硬盘, ...
- 从一组数找第K大元素
最近做面试题,经常与到一个问题,如何高效的从一组数中找到第K大的元素. 其实我们最容易想到的肯定是蛮力法. 1. 我们可以对这个乱序数组按照从大到小先行排序,然后取出前k大,总的时间复杂度为O(n*l ...
- [Python]基础教程(1)、介绍及环境搭建
一.Python简介 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言,是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 是一种解释型语言: 这意味着开 ...
- 剑指offer(40)数组中只出现一次的数字
题目描述 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 题目分析 第一种方法:使用js中的indexOf()和lastIndexOf(),只要两个相等, ...
- 继上篇后的Excel批量数据导入
上篇Excel动态生成模板,此篇将借用此模板进行Excel数据的批量导入. 说明:由于数据库中部分数据储存的是编码或者Id,因此,这里就需要用到上篇中的全局数据,判断是否有数据,有数据直接使用,没有数 ...
- linux基础之find
linux上文件查找工具: locate, find locate: 依赖于事先构建的索引,索引的构建在系统较为空闲时自动进行(周期性任务),手动更新数据库(updatedb) 索引构建过程需要遍历整 ...