nvue页面list组件和scroll-view组件在页面内容超过一屏情况下就不滚动

这也太坑了吧，nvue没有区域滚动方案了吗？
<template>
<view>
<scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-x="true" class="scroll-Y" @scrolltoupper="upper"
@scrolltolower="lower" @scroll="scroll" style="height: 100px;">
<view id="demo1" class="scroll-view-item " style="background-color: red;">A</view>
<view id="demo2" class="scroll-view-item "style="background-color: green;">B</view>
<view id="demo3" class="scroll-view-item "style="background-color: blue;">C</view>
</scroll-view>
</view>
<view style="height: 4000px;"></view>
</template>

<script>
export default {
data() {
return {
scrollTop: 0,
old: {
scrollTop: 0
}
}
},
methods: {
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
// 解决view层不同步的问题
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
uni.showToast({
icon: "none",
title: "纵向滚动 scrollTop 值已被修改为 0"
})
}
}
}
</script>

<style>
.scroll-Y {
height: 300rpx;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.scroll-view-item {
width: 720rpx;
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}

</style>