element-ui的infinite-scroll使用总是有问题

用了infinite-scroll,总是调不好，要不就是多出一个滚动条，要不就是报Uncaught TypeError: container.getBoundingClientRect is not a function的错误。请大家来看看，谢谢！

TagView.vue
`<template>

<div class="tags-view" 
                         v-infinite-scroll="load" 
                         infinite-scroll-disabled="disabled"
                         infinite-scroll-delay="1000"
                         infinite-scroll-distance="0"
                         infinite-scroll-immediate="false"
                         style="overflow:visible;">
    <div class="tag-container">
        <div class="tag-info" v-if="showTagInfo">
            <h1 class="tag-name">{{tagname}}</h1>
            <h2 class="tag-desc">{{tagdesc}}</h2>
        </div>
    </div>
    <div>
    <ul class="BookList" v-if="show">
        <li v-for="item in list" :key="item.id"   class="list-item">
            <div class="BookItem">
                <!-- <router-link :to="{ path: '/subject/' + item.id}"> -->
                    <div class="BookCoverWrapper BookItem-cover">
                        <div class="ImageWrapper">
                            <div class="sizeHodler" style="padding-top: 133.333%; background: #333;"></div>
                            ![](item.nailthumb)
                        </div>
                        <div class="BookItem-title">
                            {{item.title}}
                        </div>
                        <div class="BookItem-authors">
                            {{item.creator}}
                        </div>
                    </div>
                <!-- </router-link> -->
            </div>
        </li>
    </ul>
    </div>
     <p v-if="noMore" style="margin-top:10px;font-size:13px;color:#ccc">没有更多了</p>
</div>

</template>

<style lang="less" scoped rel="stylesheet/less">
.tags-view {

width: 1000px;
margin: 20px auto;
.tag-container {
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 60px;
    padding-bottom: 72px;
    .tag-info {
        .tag-name {
            font-size: 46px;
            font-weight: 700;
        }
        .tag-desc {

        }
    }
}
.BookList {
    margin-left: 20px;
    margin-right: 20px;
    padding: 20px 0;
    flex-wrap: wrap;
    margin-bottom: -50px;
    display: flex;
    // height: 100%;
    // height: 100vh - 178px;
    // justify-content: space-between;
    .list-item {
        margin-bottom: 60px;
        margin-right: 50px;
        &:nth-child(5n) {
            margin-right: 0;
        }
        .BookItem {
                .BookCoverWrapper {
                    .ImageWrapper {
                        border-radius: inherit;
                        .sizeHodler {
                            border-radius: inherit;
                            background: #f0eff5;
                        }
                        .Image {
                            display: block;
                            max-width: 100%;
                            height: 200px;
                        }
                    }

                    .BookItem-authors {}
                }
            }
    }
}

}

.ImageWrapper img {

        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: inherit;
        font-size: 12px;
        color: #aaa;
        white-space: nowrap;
        text-overflow: ellipsis;
        object-fit: cover;
        overflow: hidden;
}

.BookItem {

width: 150px;
flex-shrink: 0;
font-size: 14px;
color: #8590a6;

}

.BookCoverWrapper {

position: relative;
flex-shrink: 0;
overflow: hidden;
border-radius: 6px;

}

.ImageWrapper {

position: relative;
flex-shrink: 0;

}

.BookItem-title {

position: relative;
margin-top: 14px;
margin-bottom: 9px;
font: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 22px;
color: #222;

}

.BookItem-authors {

margin-bottom: 12px;
line-height: 1;

}

</style>

<script>
// import API from '../api/api_book'
const stringRandom = require('string-random')
export default {

data () {
    return {
        list: [],
        offset: 0,
        limit: 30,
        tagname: 'testonly',
        tagdesc: 'testonly',
        tid: null,
        show: false,
        showTagInfo: false,
        loading: false,
        noMore: false
    }
},
beforeMount() {
    this.init()
},
computed: {
    disabled () {
        return this.loading || this.noMore
    }
},
methods: {
    init() {
        this.show = false
        for (let i = 0; i < 30; i++) {
            this.list[i] = {}
            this.list[i].title = stringRandom(16)
            this.list[i].nailthumb = ''
            this.list[i].creator = stringRandom(5)
            this.list[i].id = i
        }
        console.log(this.list)
        this.offset = 30
        this.show = true
    },
    load() {
        this.show = false
        console.log("in load")
        this.loading = true
        if (this.offset < 100) {
            for (let i = 0; i < 30; i++) {
                var obj = {}
                obj.title = stringRandom(16)
                obj.nailthumb = ''
                obj.creator = stringRandom(5)
                obj.id = i
                this.list.push(obj)
            }
            this.show = true
            this.loading = false
        } else {
            this.noMore = true
        }
        this.offset = this.offset + this.limit
    }
}

}
</script>`