美文网首页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 滚动穿透解决办法

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

  • 移动端兼容性问题2 body和html不能禁止滚动条出现

    网页版本没有显示滚动条 但是手机端安卓和ios手机不能禁止滚动条移动端滚动穿透问题完美解决方案html body ...

  • 移动端滚动穿透

    这个问题解决N遍了,再此记录下,免得再遇到浪费脑细胞 情况一:弹窗里面没有滚动条 思路:阻止touchmove事件...

  • { behavior: 'smooth' }配置项ios不生效的

    问题:在使用到scroll/scrollTo等滚动api的时候, ios移动端基本上是不支持的 解决办法:使用 s...

  • 移动端滚动穿透问题

    定义:移动端弹出fixed弹窗的话,在弹窗上滑动会导致下层的页面跟着滚动,这个叫“滚动穿透” 解决方案1 在弹出层...

  • 移动端的滚动穿透

    问题:页面很长会有竖向的滚动,有个吸底的工具条,在吸底的工具条内容里手指上下拖动,不拖出外面,也能触发页面的滚动。...

  • 滚动穿透解决方案

    解决PC/移动端弹出层滚动穿透的问题。 描述 弹出层内容滚动时,body跟随滚动。 方案 法一: overflow...

  • 滚动(移动端滑动)穿透问题

    在项目中遇到很多次滚动穿透问题,每一次都是看情况临时试解决方案能否可行,在这里统一总结一下 pc端model框弹出...

  • 移动端滑动卡顿问题

    移动端手指触摸屏幕过于频繁,移动端会出现卡顿的现象,下面介绍几种顺畅滚动的解决办法。 一、 -webkit-ove...

  • 移动端滚动穿透问题完美解决方案

    移动端滚动穿透问题完美解决方案https://uedsky.com/2016-06/mobile-modal-sc...

网友评论

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

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