当前位置:蜘蛛11选5倍投计划表主页 > 蜘蛛11选5倍投计划表国内 > 蜘蛛11选5倍投计划表内容

南京盖坑朴教育咨询有限公司_ios 下防止整个网页滑动(阻尼回弹 . 瞒天过海,骗IOS,把阻尼回弹限制在滚动区div内

下面是一个手机APP页面,分成上中下三部分,最上面和最下面是固定的,中间可以滚动。这是常见的APP布局方式。


 

     
运行效果如下,顶部和底部固定区域都是黄色,中间的滚动div包含了红灰相间的色块。



在ios测试时发现基本正常,可是有以下几个问题:

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

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

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

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

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

dang gun dong qu gun dao ding bu shi, shou zai chu ping shi, ba ba div de gun dong wei zhi xiang xia diao yi dian dian, zhe yang xi tong jiu hui yi wei hai mei you gun dao tou, jiu hui ji xu hua dong, ran hou shi div nei de zu ni hua dong, zheng ge wang ye bu hui hua dong. gun dong dao di bu shi, zai chu ping shi, tong li xiang shang diao yi dian. zhe yi zhao qi pian shou fa man tian guo hai ba IOS pian guo qu le. dai ma ru xia:

    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(); 
});

?

当前文章:http://www.xamhlzgc.com/i17769ie/615760-1179590-87411.html

发布时间:00:23:44

www.90356.com??02848.com??铁算盘??www.548077.com??今晚六彩现场开奖结果??030055管家婆开奖直播??顶尖高手论坛??马会资料??77155彩霸王中特官方网??2018全年一句解一码??