bug:小程序弹窗滚动时影响到了底部的页面滚动

495 阅读1分钟

背景:

小程序弹窗时,滚动弹窗内的内容,影响到了底部页面的滚动,现在要不允许影响到底部页面

问题解决:

这个是小程序的问题,滑动穿透导致的,可以使用禁止冒泡的方法解决。

在弹窗或者遮罩层添加 @touchmove.stop.prevent

<Popup
    ...
    @touchmove.stop.prevent="stopPageScroll"
>
</Popup>
methods: {
    stopPageScroll() {
        return true
    },
}

此时出现了别的问题

页面没有使用scroll-view来实现滚动,导致现在页面滚动不了

解决办法:使用scroll-view重写滚动

// enable-flex: 允许scroll-view使用flex布局
<scroll-view scroll-y enable-flex>
    ....
</scroll-view>

问题2 隐藏滚动条

::-webkit-scrollbar {
        display: none;
}