滑动穿透

移动端开发过程中遇到以下问题:页面出现滚动条,在此基础上点击按钮出现底部弹框,底部弹框的内容区域需要滑动,背景阴影区域不需要滑动,但是滑动阴影区域,阴影下的页面仍在滑动.解决方法如下:

此问题究其根本是页面布局不合理导致的.

错误的布局结构:

<template>
    <div class="page">
        <div class="content"> //这里是内容,会出现滑动
            <div class="modal"></div> //这里是弹框组件,此时即使设置弹窗的position:fixed,top,right,left,bottom= 0,只要.content 出现了滑动,滑动阴影层还是会滑动
        </div>
    </div>
</template>

更改页面布局:

<style lang="less">
    .page{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        overflow: hidden;
    }

</style>

<template >
    <div class="page"> //整个页面容器,固定不可滑动
        <div class="content"></div> //这里是页面内容区,overflow:auto

        <div class="modal"></div> //这里是组件弹窗区,可不可滑自己设置,都可以

    </div>
</template>

这样内容和弹窗就不会影响了.