移动列表页面添加v-infinite-scroll后，页面出现两个滚动条，设置overflow: hidden无效

Question

设置最外层bodyBox为overflow: hidden;width: 100%;
height: 100%;，想去除最外层滚动条，无效，滚动条还是存在两个

<template>
    <div class="bodyBox">
        <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
                <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
                <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
            </el-tabs>
        </div>
        <div>
            <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
                <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
            </ul>
        </div>
    </div>
</template>
如何设置只有内部一个滚动条？

Answer 1

可能是里面的设置height:100%问题，应该减去其他元素高度才对height: calc(100% - xxx)