scroll-view

可滚动透视的区域

html部分

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
   <!- 内容-->
</scroll-view>

 js部分

export default {
    data() {
	    return {
            //滚动条
            scrollTop: 0,
	            old: {
		            scrollTop: 0
               }
        }
    },
    methods: {
        //滚动条
		scroll: function(e) {
			this.old.scrollTop = e.detail.scrollTop
		}
    }
}

 缺点：存在滚动穿透

我用的uview-ui做的前端

@touchmove.native.stop.prevent  阻止穿透(vue通用)

弹出层示例： 

<template>
    <view>
        <u-popup @touchmove.native.stop.prevent :closeable="true" 
        :round="30" mode="bottom" @close="close" @open="open">
            <scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">
                <view style="padding: 20rpx; height: 600rpx;">
                    <!- 内容-->
                <view>
            </scroll-view>
        </u-popup>
    </view>
</template>


<script>
export default {
    data() {
	    return {
            //滚动条
            scrollTop: 0,
	            old: {
		            scrollTop: 0
               }
        }
    },
    methods: {
        //滚动条
		scroll: function(e) {
			this.old.scrollTop = e.detail.scrollTop
		}
    }
}
</script>