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

今天药忘吃喽~ 2022-04-17 00:52 90阅读 0赞

自己在用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][https_www.cnblogs.com_dongcanliang_p_8946495.html]  
非常感谢！！！！！

转发需标明来源，谢谢~

[https_www.cnblogs.com_dongcanliang_p_8946495.html]: https://www.cnblogs.com/dongcanliang/p/8946495.html