ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法

ios偶现下拉出现黑底时,界面第一次上拉时拉不动的解决方案:

document.querySelector('#app').addEventListener('touchstart', function (ev) {
  let a=$('#app')[0].scrollTop
  if($('#app')[0].scrollTop <=0){
    $('#app')[0].scrollTop =1
  }
});

问题分析:首先要清楚出界是怎么发生的

&amp;amp;lt;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"&amp;amp;gt;

不同情况解决方案不同,局部滚动可以在github 上搜索scrollfix这个组件,也可以在页面的固定区域禁止touchmove事件

&amp;amp;lt;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"&amp;amp;gt;
全局滚动没有特别好的解决方案,可以考虑变成局部滚动,然后在按照上面的方法解决

具体的可以看下慕课网的视频课程我有我特色-开发眼中的前端交互(2)

微信H5单页面滑动的时候如何避免出界,出现头部和底部的黑底?的更多相关文章

  1. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  2. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  3. 快速构建H5单页面切换应用

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  4. 详细解剖大型H5单页面应用的核心技术点

    项目 Xut.js 阐述下开发中一个比较核心的优化技术点,这是一套平台代码,并非某一个插件功能或者框架可以直接拿来使用,核心代码大概是6万行左右(不包含任何插件) .这也并非一个开源项目,不能商业使用 ...

  5. 详解H5中的history单页面,手动实现单页面开发,细说h5单页面原理

    就目前来看,前端的单页面开发占了很大一部分,一方面无刷新的切换增强了体验,并且浏览器记录依然存在,前进后退都没问题,在之前我们通地址栏中的hash改变来触发onhashchange方法来实现单页面应用 ...

  6. h5单页面布局

    前段时间做了一个PC端单页面应用 GitHub因为项目开始的比较仓促,加上本人前端经验特别少,虽然项目大体完成了,但是页面布局确成立它的硬伤...为了填补心里落差,专门做了一个h5的单页面布局,代码很 ...

  7. H5单页面架构:自定义路由 + requirejs + zepto + underscore

    angular优点: 强大的数据双向绑定 View界面层组件化 内置的强大服务(例如表单校验) 路由简单 angular缺点: 引入的js较大,对移动端来说有点吃不消 语法复杂,学习成本高 backb ...

  8. H5单页面架构:backbone + requirejs + zepto + underscore

    首先,来看看整个项目结构. 跟上一篇angular类似,libs里多了underscore和zepto.三个根目录文件: index.html:唯一的html main.js:requirejs的配置 ...

  9. H5单页面架构:requirejs + angular + angular-route

    说到项目架构,往往要考虑很多方面: 方便.例如使用jquery,必然比没有使用jquery方便很多,所以大部分网站都接入类似的库: 性能优化.包括加载速度.渲染效率: 代码管理.大型项目需要考虑代码的 ...

随机推荐

  1. Unity 游戏对象的组件列表

    描述: 1 个游戏对象,上面有 4 个组件, 如图: 脚本 Test_01 的内容,如下: using System.Collections; using System.Collections.Gen ...

  2. ubuntu15.04 xampp 安装memcache

    要ThinkPHP3.2里由于要用到 memcache 缓存, 如果没有配置memcache,会报错,说系统支持 memcache. 所在配置的时候有点问题,现在解决了,现把它记录下来,以便以后查阅之 ...

  3. wait/notify

    某面试题,实现一个生产者——消费者模型 题目:采用多线程技术,通过wait/notify,设计实现一个符合生产者和消费者问题的程序,对某一个对象(枪膛)进行操作,其最大容量是20颗子弹,生产者线程是一 ...

  4. JavaScript 对象继承 OOP (三)

      对象继承 A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. JavaScript 语言的继承不通过 class (es6 中的class 不过是 ...

  5. spring mvc 与Struts的认识

    首先,纠正一个概念上的错误.ssh一般意义上是指 struts,spring framework以及hibernate.这三个框架作用是不一样的.hibernate主要是用于持久层,struts主要是 ...

  6. 浅谈 ECMAScript 和 JavaScript

    ES5与ES3基本保持兼容,较大的语法修正和新功能加入,将由JavaScript.next完成. 什么是ECMAScript?http://baike.baidu.com/link?url=G1T8n ...

  7. Azure 进阶攻略 | 电脑跑分你会,但虚拟机存储性能跑分的正确姿势你造吗?

    想学生时代,小编最爱做的就是研究电脑硬件,然后给自己.朋友和童鞋装机.装好后呢?当然要第一时间跑分了!各种跑分软件运行一遍,不断优化,不断测试.终于得到一个满意成绩,截图分享到网上显摆一下.当年为啥就 ...

  8. 浏览器中使用calc不识别

    在使用css3中的calc运算函数时,发现浏览器不识别,当时代码是这样的 width:calc(100%-50px); 经过查询官网原来发现这里有个需要注意的地方就是在进行加减运算的时候,必须在运算符 ...

  9. Windows 系统System帐号及权限

    今天碰到一同事,在那里删除注册表,死活都删除不掉,想起以前在学校的时候老是被莫名的被别人叫过去修电脑(开玩笑,真觉得那时候的我比现在牛B很多),什么删除不掉的东西没见过,然后小小的百度了一下很快就帮他 ...

  10. April 6 2017 Week 14 Thursday

    If you smile when no one else is around, you really mean it. 独处时的微笑,才是发自内心的. Recently I found I seld ...