美文网首页tool
移动端ios 滚动穿透解决办法

移动端ios 滚动穿透解决办法

作者: 米妮是只猫 | 来源:发表于2021-08-06 16:26 被阅读0次

    h5弹窗(并且有滚动)并且下面的内容是可以滚动的,会导致滑动弹窗的时候下面也跟着动,记录我自己的解决办法

    <div class="pop" @mousemove.prevent="">
        <div class="pop-content">
            // 弹窗中的内容
            <div class="scroll" @mousemove.stop="" ref="scroll" @scroll="handleScroll"></div>
        </div>
    </div>
    

    这样是可以滑动了,不会影响下面的滚动,但是有个小问题就是第一次滑动的时候有时候还是会触发下面的滑动

    解决方法
    mounted() {
        this.$nextTick(()=> {
            const scroll = this.$refs.scroll;
            scroll.scrollTop = 1
        })
    }
    methods() {
        const scroll = this.$refs.scroll,
            top = scroll.scrollTop;
        if (!top) {
            scroll.scrollTop = 1;
        }
    }
    
    

    要在开始的时候就设置上,并且滚动到头部也要设置一下,这样就可以了
    猜测:弹窗上是可以滑动的,所以能够触发body上的滚动,刚开始可能不会触发弹窗滚动,给它设置一个较小的值,这个滑动就只会触发弹窗上的滚动了

    相关文章

      网友评论

        本文标题:移动端ios 滚动穿透解决办法

        本文链接:https://www.haomeiwen.com/subject/cefivltx.html