继续上一篇文章移动web页面支持弹性滚动解决方案，其实这里面的demo有一个小小的bug，现在为大家解决此bug，直接上图吧，看来就明白了！

1

Bug描述：当页面向下滑动的时候，上面会有一片的微信盲区，以前也未特意的关注此方面，但是从用户体验方面看下值得去思考了，首先需要阻止document默认事件就ok了，但只阻止默认事件是不能满足，然后还需将某些需要touchmove的事件的元素阻止冒泡，关于此类事件的原理，在我曾经的博文中可以找到，直接在www.npm8.com的搜索栏里面搜索“事件冒泡”，虐过。。。。

1
2
3
4
5
6
7
document.addEventListener('touchmove',function(event){
event.preventDefault();//阻止浏览器的默认事件
},false);

document.addEventListener('touchstart',function(event){
event.preventDefault();//阻止浏览器的默认事件 
},false);

这样，左右滑动可以完成了，但是触摸一个div的时候，页面不能上下滑动了，怎么办？
当touchmove的时候，实时改变window的scrolltop值？
这样会有原生的滑动效果吗？
问题已经解决了！
最终代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
var touchTarget,
    touchScreenX,
    touchScreenY,
    conditionParentUntilTrue,
    disableScroll;

conditionParentUntilTrue = function (element, condition) {
    var outcome;

    if (element === document.body) {
        return false;
    }

    outcome = condition(element);

    if (outcome) {
        return true;
    } else {
        return conditionParentUntilTrue(element.parentNode, condition);
    }
};

window.addEventListener('touchstart', function (e) {
    touchTarget = e.targetTouches[0].target;
    scrollMap = {}

    scrollMap.left = conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollLeft > 0;
    });

    scrollMap.top = conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollTop > 0;
    });

    scrollMap.right = conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollWidth > element.clientWidth &&
               element.scrollWidth - element.clientWidth > element.scrollLeft;
    });

    scrollMap.bottom =conditionParentUntilTrue(touchTarget, function (element) {
        return element.scrollHeight > element.clientHeight &&
               element.scrollHeight - element.clientHeight > element.scrollTop;
    });

    touchScreenX = e.targetTouches[0].screenX;
    touchScreenY = e.targetTouches[0].screenY;
    disableScroll = false;
});

window.addEventListener('touchmove', function (e) {
    var moveScreenX,
        moveScreenY;

    if (disableScroll) {
        e.preventDefault();
        return;
    }

    moveScreenX = e.targetTouches[0].screenX;
    moveScreenY = e.targetTouches[0].screenY;

    if (
        moveScreenX > touchScreenX && scrollMap.left ||
        moveScreenY < touchScreenY &amp;&amp; scrollMap.bottom ||
        moveScreenX < touchScreenX &amp;&amp; scrollMap.right ||
        moveScreenY > touchScreenY &amp;&amp; scrollMap.top
    ) {
    } else {
        e.preventDefault();
        disableScroll = true;
    }
});