信息流广告不跟着页面滑动

<template>  
    <view class="content">  
        <customNav title='帮助中心' @back='back'></customNav>  

        <view class="cardView" v-for="(item , index) in dataList1" :key="index"></view>  

        <view class="ad-view">  
            <ad adpid="*****" @load="adLoadSuccess" @close="adClose" @error="adLoadError"></ad>  
        </view>  

        <view class="cardView" v-for="(item , index) in dataList2" :key="index"></view>  

    </view>  
</template>  

.content {  
    display: flex;  
    flex-direction: column;  
    background: url(~@/static/img/background.png) 0 0/100% 100% no-repeat;  
    position: relative;  
    overflow: scroll;  

    .cardView {   
        width: 686rpx;  
        margin-left: 32rpx;  
        height: 200rpx;  
        background-color: lightgray;  
        margin-top: 20rpx;  
        flex: 0 0 auto;  
    }  

    .ad-view {   
        width: 686rpx;  
        margin-left: 32rpx;  
        margin-top: 32rpx;  
        border: 1px solid blue;  
    }  
}  

代码如上图，非常简单的页面流程。但是广告组件不跟着整个页面滑动。

请教一下是什么问题，我应该怎么去兼容这个《ad》组件。

要求一：页面是需要滚动的。
要求二：不要再说用nvue了，项目很大，为了一个信息流广告帮这么多页面改成nvue的话成本太高。