页面露底

最新推荐文章于 2021-06-03 10:40:57 发布

weixin_30379973

最新推荐文章于 2021-06-03 10:40:57 发布

阅读量170

点赞数

原文链接：http://www.cnblogs.com/camille666/p/mobile_show_bottom.html

版权

问题描述：页面滚动到上下边缘的时候，如果继续拖拽，会将整个View一起拖走，导致页面【露底】。
解决方案：判断拖拽方向以及是否为边缘来阻止touchmove事件，防止页面继续拖拽。
1、页面布局

<body>
<main> 
    <!-- 内容在这里... --> 
</main>
<!-- fixed定位的底部 -->
<footer id="J_footer"> 
    <input type="text" placeholder="" id="J_f_input"/> 
    <button id="J_f_submit">提交</button> 
</footer>
<body>

2、js处理

// 防止内容区域滚到底后引起页面整体的滚动 
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);
        }
    }
});