码迷,mamicode.com
首页 > 移动开发 > 详细

201508061129_《移动开发之——防止触摸移动导致整个界面“露底”》

时间:2015-08-06 13:13:34      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:

// 防止内容区域滚到底后引起页面整体的滚动
var content = document.querySelector(‘main‘);
var startY;

content.addEventListener(‘touchstart‘, function (e) {
    startY = e.touches[0].clientY;
});

content.addEventListener(‘touchmove‘, function (e) {
    // 高位表示向上滚动
    // 底位表示向下滚动
    // 1容许 0禁止
    var status = ‘11‘;
    var ele = this;

    var currentY = e.touches[0].clientY;

    if (ele.scrollTop === 0) {
        // 如果内容小于容器则同时禁止上下滚动
        status = ele.offsetHeight >= ele.scrollHeight ? ‘00‘ : ‘01‘;
    } else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) {
        // 已经滚到底部了只能向上滚动
        status = ‘10‘;
    }

    if (status != ‘11‘) {
        // 判断当前的滚动方向
        var direction = currentY - startY > 0 ? ‘10‘ : ‘01‘;
        // 操作方向和当前允许状态求与运算,运算结果为0,就说明不允许该方向滚动,则禁止默认事件,阻止滚动
        if (!(parseInt(status, 2) & parseInt(direction, 2))) {
            stopEvent(e);
        }
    }
});

 

201508061129_《移动开发之——防止触摸移动导致整个界面“露底”》

标签:

原文地址:http://www.cnblogs.com/beesky520/p/4707521.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!