[前端][FMUI]弹窗内部滚动影响底部页面滚动问题

问题现象:

示例知识库open in new window

弹窗内部滚动影响底部页面滚动问题

解决方案:

下面这段代码放置在弹窗组件的mounted钩子函数中

//滚动容器
var scrollBox = this.$el.querySelector('#popup-content');

scrollBox.addEventListener('touchstart', (e) => {
    self.initialPageY = e.changedTouches[0].pageY
})
scrollBox.addEventListener('touchmove', (e) => {
    const deltaY = e.changedTouches[0].pageY - self.initialPageY
    
    // 禁止向上滚动溢出
    if (e.cancelable && deltaY > 0 && scrollBox.scrollTop <= 0) {
        e.preventDefault()
    }

    // 禁止向下滚动溢出
    if (
        e.cancelable &&
        deltaY < 0 && 
        scrollBox.scrollTop + scrollBox.clientHeight >= scrollBox.scrollHeight
    ) {
        e.preventDefault()
    }
})
最后更新时间::
贡献者: wyanqd