微信H5单页面滑动的时候如何避免出界,出现头部和底部的黑底?
ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法
ios偶现下拉出现黑底时,界面第一次上拉时拉不动的解决方案:
问题分析:首先要清楚出界是怎么发生的
<img src="https://pic4.zhimg.com/50/7cffbf1b63e44fb551ad137ea0a1217a_hd.jpg" data-rawwidth="1020" data-rawheight="555" class="origin_image zh-lightbox-thumb" width="1020" data-original="https://pic4.zhimg.com/7cffbf1b63e44fb551ad137ea0a1217a_r.jpg">
不同情况解决方案不同,局部滚动可以在github 上搜索scrollfix这个组件,也可以在页面的固定区域禁止touchmove事件
<img src="https://pic3.zhimg.com/50/7791b2bbf0cc43f77a772ed43c25ead3_hd.jpg" data-rawwidth="1105" data-rawheight="597" class="origin_image zh-lightbox-thumb" width="1105" data-original="https://pic3.zhimg.com/7791b2bbf0cc43f77a772ed43c25ead3_r.jpg">
全局滚动没有特别好的解决方案,可以考虑变成局部滚动,然后在按照上面的方法解决
具体的可以看下慕课网的视频课程我有我特色-开发眼中的前端交互(2)
微信H5单页面滑动的时候如何避免出界,出现头部和底部的黑底?的更多相关文章
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
- 快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- 快速构建H5单页面切换应用
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- 详细解剖大型H5单页面应用的核心技术点
项目 Xut.js 阐述下开发中一个比较核心的优化技术点,这是一套平台代码,并非某一个插件功能或者框架可以直接拿来使用,核心代码大概是6万行左右(不包含任何插件) .这也并非一个开源项目,不能商业使用 ...
- 详解H5中的history单页面,手动实现单页面开发,细说h5单页面原理
就目前来看,前端的单页面开发占了很大一部分,一方面无刷新的切换增强了体验,并且浏览器记录依然存在,前进后退都没问题,在之前我们通地址栏中的hash改变来触发onhashchange方法来实现单页面应用 ...
- h5单页面布局
前段时间做了一个PC端单页面应用 GitHub因为项目开始的比较仓促,加上本人前端经验特别少,虽然项目大体完成了,但是页面布局确成立它的硬伤...为了填补心里落差,专门做了一个h5的单页面布局,代码很 ...
- H5单页面架构:自定义路由 + requirejs + zepto + underscore
angular优点: 强大的数据双向绑定 View界面层组件化 内置的强大服务(例如表单校验) 路由简单 angular缺点: 引入的js较大,对移动端来说有点吃不消 语法复杂,学习成本高 backb ...
- H5单页面架构:backbone + requirejs + zepto + underscore
首先,来看看整个项目结构. 跟上一篇angular类似,libs里多了underscore和zepto.三个根目录文件: index.html:唯一的html main.js:requirejs的配置 ...
- H5单页面架构:requirejs + angular + angular-route
说到项目架构,往往要考虑很多方面: 方便.例如使用jquery,必然比没有使用jquery方便很多,所以大部分网站都接入类似的库: 性能优化.包括加载速度.渲染效率: 代码管理.大型项目需要考虑代码的 ...
随机推荐
- [转]Javascript的匿名函数
本文转自:http://dancewithnet.com/2008/05/07/javascript-anonymous-function/ 一.什么是匿名函数? 在Javascript定义一个函数一 ...
- 数据结构之C语言模拟整数数组实现
#include <stdio.h> #include <malloc.h> #include <stdlib.h> typedef struct Arr { in ...
- pat1090. Highest Price in Supply Chain (25)
1090. Highest Price in Supply Chain (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 C ...
- python 字符串转字节数组
场景: java加解密和python加解密互转的时候,因一些非显示字符无法确认两者是否一致,故需要打出他们的十六进制字节数组进行比较 1.python代码实现 str='123';print str. ...
- Homemade Script Language: RED
Made by C, named after RED(RecovEr from SaDness) 欢迎批评 :)
- IIS报错试图加载格式不正确的程序集解决办法 64位WinServer系统兼容32位程序集
问题描述: 将网站/WCF发布到IIS后运行报这个错. 原因: 64位系统和32系统不匹配导致. 解决办法: 方法一.注册32位IIS(必须卸载64位IIS) ...
- windows常用命令行总结
cmd下的命令行 1.查看当前目录下的子目录 dir 或 dir /b 类似Linux 下的 ls 或者 ls -l 2.盘符切换 d: 3.进入目录 cd [目录名] 退一个目录 cd .. ...
- iOS - The identity used to sign the executable is no longer valid
①.首先在xcode中的Build Settings中看有没有设置: ②.账号是不是多个人在用,个人开发者的账号只能绑定一台电脑,当另外一台电脑绑定了话,你的电脑就失效了.你确认下是不是这个原因造成的 ...
- Android中关于XML的一个小问题——使用XML输出“<”错误的问题
在 XML 中,有 5 个预定义的实体引用: < < 小于 > > 大于 & & 和号 ' ' 单引号 " " 引号 注释 ...
- python模块介绍和 import本质
模块的定义: 用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能),本质上就是.py结尾的python文件. 包的定义: 用来从逻辑上组织模块的,本质上就是一个目录.(必须有一个__ ...