ios 下防止整个网页滑动(阻尼回弹 . 瞒天过海,骗IOS,把阻尼回弹限制在滚动区div内

下面是一个手机APP页面,分成上中下三部分,最上面和最下面是固定的,中间可以滚动。这是常见的APP布局方式。
<style>
.box{
  overflow: auto;
  -webkit-overflow-scrolling: touch;  /*使得div内的超出滑动具有惯性,阻尼回弹等特性,否则滑动很生涩*/
}
</style>
</head>

<body class="box" >
     <div id="top" class="scroll1" style="height:50px;"></div>

 <div class="scroll" style="height:calc( 100% - 100px);width:100%;overflow:auto;">
     <div style="height:500px;width:100%;">
     </div>
      <div style="height:500px;margin-top:200px; ">
     </div>
     <div style="height:500px;margin-top:200px; ">
     </div>
      <div style="height:500px;margin-top:200px; ">

     </div>
 </div>
  <div id="bottom" class="scroll1" style="height:50px;"></div>
运行效果如下,顶部和底部固定区域都是黄色,中间的滚动div包含了红灰相间的色块。
在ios测试时发现基本正常,可是有以下几个问题:

1.当滚动到底部(稍停几秒),再上拉的时候,整个网页就会上滑,松手后阻尼回弹。

2.当滚动到顶部(稍微停几秒),再下拉时,整个网页就下滑,松手后阻尼回弹。

3.上在顶部或底部上下滑动时,整个页面会上下滑动。松手后立即滑动中间区域,也是上下滑动(停留秒后再滑,则正常滑动中间区域)

问题1,2其实是一个问题,解决原理如下:

当滚动区滚到顶部时,手再触屏时,把把div的滚动位置向下调一点点,这样系统就会以为还没有滚到头,就会继续滑动,然后是div内的阻尼滑动,整个网页不会滑动。滚动到底部时,再触屏时,同理向上调一点。这一招欺骗手法瞒天过海把IOS骗过去了。代码如下:

    var overscroll = function(el) {
    el.addEventListener(‘touchstart‘, function() {
        var top = el.scrollTop
        ,totalScroll = el.scrollHeight
        ,currentScroll = top + el.offsetHeight;
        if(top === 0) {
            el.scrollTop = 1;
        }else if(currentScroll === totalScroll) {
            el.scrollTop = top - 1;
        }
    });
}
 overscroll(document.querySelector(‘.scroll‘));

问题3,更简单,直接忽略滚动事件即可:

document.all.bottom.addEventListener(‘touchmove‘, function(evt) {
evt.preventDefault();
});

document.all.top.addEventListener(‘touchmove‘, function(evt) {
evt.preventDefault();
});

原文地址:https://www.cnblogs.com/voiceangel/p/9787227.html

时间: 2024-10-13 12:28:46

ios 下防止整个网页滑动(阻尼回弹 . 瞒天过海,骗IOS,把阻尼回弹限制在滚动区div内的相关文章

ios下元素溢出设置 overflow:auto; 不能滑动解决办法

ios下元素溢出设置 overflow:auto; 不能滑动解决办法: overflow:auto; overflow-y:scroll; -webkit-overflow-scrolling:touch; height:200px;

iOS下JS与OC互相调用(一)--UIWebView 拦截URL

http://blog.csdn.net/u011619283/article/details/52135977 最近准备把之前用UIWebView实现的JS与原生相互调用功能,用WKWebView来替换.顺便搜索整理了一下JS 与OC 交互的方式,非常之多啊.目前我已知的JS 与 OC 交互的处理方式: * 1.在JS 中做一次URL跳转,然后在OC中拦截跳转.(这里分为UIWebView 和 WKWebView两种,去年因为还要兼容iOS 6,所以没办法只能采用UIWebView来做.) *

李洪强iOS下的实际网络连接状态检测

iOS下的实际网络连接状态检测 序言 网络连接状态检测对于我们的iOS app开发来说是一个非常通用的需求.为了更好的用户体验,我们会在无网络时展现本地或者缓存的内容,并对用户进行合适的提示.对绝大部分iOS开发者来说,从苹果示例代码改变而来的各种Reachablity框架是实现这个需求的普遍选择,比如这个库.但事实上,基于此方案的所有实现,都无法帮助我们检测真正的网络连接状态,它们能检测的只是本地连接状态:这种情况包括但不限于如下场景: 1.现在很流行的公用wifi,需要网页鉴权,鉴权之前无法

ios 下锁使用- 09-多线程

ios 下锁使用 时间:2014-08-08 15:36:56 总结下我所了解的ios下的锁: 1. 互斥锁 @synchronized,@synchronized块隐式的添加一个异常处理例程来保护代码.该处理例程会在异常抛出的时候自动的释放互斥锁.这意味着为了使用@synchronized指令,你必须在你的代码中启用异常处理. NSLock NSRecursiveLock,递归锁,一个线程中可以多次使用 NSConditionLock,条件锁,其实也是一种互斥锁:类似的有NSCondition

解决IOS下不支持fixed的问题

我们公司有一个页面底部用到了fixed样式,每当弹出键盘的时候,IOS下fixed就会走样(据我所知android没有该问题). 为此之前我经过产品的同意做了简单的处理(方法1). 方法一: focus的时候让fixed块position变为relative,这是最简单的处理方法. 下面是我的小demo <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf

IOS下WEBVIEW 的javascript数组与json定义 及交互

最近在折腾IOS新闻浏览客户端,当中需要用到webview传递JSON数据到IOS上,然后在IOS上解析.刚入门IOS不久,看了不少的书,但都是囫囵吞枣.在开发过程中,遇到不少问题.开发环境mac mini (IOS端开发)thinkpad x200s(PHP开发)功能实现:在WEBVIEW创建DOM监听,判断用户按下WEBVIEW上链接,通过DOM获取相关链接信息,遍历数组,最终用$.toJSON(jsArray);//将JS数组转换成JSON格式下面记录一下1.JS数组定义最终在WEBVIE

iOS下的手势密码实现

一.iOS下的手势 1 #import "ViewController.h" 2 3 @interface ViewController () 4 5 @property (weak, nonatomic) IBOutlet UILabel *genstureLabel; 6 7 8 @end 9 10 @implementation ViewController 11 12 - (void)viewDidLoad { 13 [super viewDidLoad]; 14 15 16

Chromium网页滑动和捏合手势处理过程分析

从前面一文可以知道,Chromium的Browser进程从Touch事件中检测到滑动和捏合手势之后,就会将它们发送给Render进程处理.滑动手势对应于修改网页的Viewport,而捏合手势对应于设置网页的缩放因子.通常我们比较两个浏览器的流畅程度,就是比较它们的滑动和捏合性能.因此,浏览器必须要快速地响应用户的滑动和捏合手势.本文接下来就详细分析Chromium快速响应网页滑动和捏合手势的过程. 老罗的新浪微博:http://weibo.com/shengyangluo,欢迎关注! 从前面Ch

解决iOS下input和fixed 问题

在ios下如果页面底部有fixed 元素当有input输入框触发键盘时fixed会浮动在页面出现展示总是 解决方法有很多种,但是要根据实际需要更改 方法一.css解决(弊端:当有大面积input元素时会出现滑动不顺畅问题) //这里给内容区域设置 position:absolute,并且设置一个距离fixed的底部距离 .main{ position:absolute; bottom:rem-calc(80px); //fixed元素的高度 top:0; left:0; width:100%;