在移动端，教你如何在可以滚动的div上禁用默认浏览器滚动（橡皮筋效果）

自己在用vue-waterfall-easy这个插件写移动端瀑布流的时候，发现他自带的下拉刷新非常难用(基本不可用)，原因是每次下滑都会触发浏览器的橡皮筋效果，下拉刷新的功能根本拉不出来，这很尴尬，于是百度了许久，终于找到一个合适方法，现在为了纪念一下这个砸电脑砸手机的冲动时刻，特此保留以后使用以及帮助更多人。如有疑问，或者更好的解决方法，直接留言哦！！！

        //全局监听
        let startY = 0;
        let scrollBox = document.getElementsByClassName('vue-waterfall-easy-scroll')[0];
        //scrollBox  即，您需要实现滚动的dom
        document.body.addEventListener('touchstart', (e) => {
            startY = e.touches[0].pageY;
        }, { passive: false });
        document.body.addEventListener('touchmove', (e) => {
            let moveY = e.touches[0].pageY;
            let top = scrollBox.scrollTop;
            let ch = scrollBox.clientHeight;
            let sh = scrollBox.scrollHeight;
            if (!this.isChildTarget(e.target, scrollBox)) {
                e.preventDefault();
            } else if ((top === 0 && moveY > startY) || (top + ch === sh && moveY <            startY)) {
                e.preventDefault();
            }
        },{ passive: false })；


//isChildTarget方法
isChildTarget(child, parent){
            let parentNode;
            let justChild = false;
            if (justChild) {
                parentNode = child.parentNode;
            } else {
                parentNode = child;
            }
            
            if (child && parent) {
                while (parentNode) {
                if (parent === parentNode) {
                    return true;
                }
                parentNode = parentNode.parentNode;
                }
            }
            return false;
        },

/*此处有一个坑，已经坑了我一天了。现在终于解决了。因为addEventListener这个方法是全局的，所以一般要在销毁组件(beforeDestroy)的时候去removeEventListener一下，不然在这个项目里面就会一直执行这个监听，如果你在另一个页面也使用了同一个监听的话，将会无效*/

至于我的销毁方法，如下，把需要监听操作封成一个函数，然后方便调用与移除

//1.开启监听

document.body.addEventListener('touchmove', this.touchmoveFunction,{ passive: false })

//2.监听的函数

touchmoveFunction(e){
    touchmoveFunction(e){
        let scrollBox = document.getElementsByClassName('vue-waterfall-easy-scroll')[0];
        let moveY = e.touches[0].pageY;
        let top = scrollBox.scrollTop;
        let ch = scrollBox.clientHeight;
        let sh = scrollBox.scrollHeight;
        if (!this.isChildTarget(e.target, scrollBox)) {
             e.preventDefault();
        }else if ((top === 0 && moveY > this.startY) || (top + ch === sh && moveY <         
             this.startY)) {
                e.preventDefault();
             }
},

//3.销毁组件时移除监听

beforeDestroy(){
        document.body.removeEventListener('touchstart',this.touchstartFunction, { passive: false });
        document.body.removeEventListener("touchmove",this.touchmoveFunction,{ passive: false });
    }

参考文章来自https://www.cnblogs.com/dongcanliang/p/8946495.html
非常感谢！！！！！

转发需标明来源，谢谢~