使用overflow-y: auto制作滚动条,但底部元素无法完全展示

Question

问题描述

使用overflow-y: auto制作滚动条,但底部元素无法完全展示

问题出现的环境背景及自己尝试过哪些方法

用的是vue2.0,electron,iview,vddl
一个写死了高度的父DOM是div,内部用的是v-for展示数据.通过点击按钮动态添加数据,但滚动到底部时,最底部的元素无法完全显示

相关代码

css:

.scroll{
    width: 100%;
    overflow-y: auto;
    padding: 10px 5px;
}

template:

<button @click="add">
<div class="scroll" style="height:500px">
    <vddl-list :list="list">
        <vddl-draggable v-for="(node,index) in list" :node="node" :key="node.id" :wrapper="list" :index="index" :draggable="node" effect-allowed="move">
        </vddl-draggable>
    </vddl-list>
</div>

script:

 methods: {
    add(){
        this.list.push(new node());
    }
}

蓝色框内为完整的node元素,红色框是右边滚动条已经到底部,但最后一个node元素无法完全显示