移动端点透事件--阻止滚动事件

1,837 阅读1分钟

移动端模态框滚屏事件的解决方法

1 原生写法是:

    function mo(event) {
        event.preventDefault();
    }
    
    function stop() {
        document.body.style.overflow = 'hidden';
        doucment.addEventListener('touchmove', mo, {passive: false});
    }
    
    function move() {
        document.body.style.overflow = 'auto';
        doucment.removeEventListener('touchmove', mo, {passive: false});
    }

2.vue的写法

外面再套一层div,加上touchmove.prevent

 @touchmove.prevent

mint-ui

<mt-datetime-picker>

<div @touchmove.prevent> 
    <mt-datetime-picker v-model="pickerValue" type="date" ref="picker" @confirm="handleConfirm" :start-date="startDate" :end-date="endDate" year-format="{value}" month-format="{value}" date-format="{value}"> </mt-datetime-picker> 
</div>