我试图在我的项目上设置无限滚动，但是我很难使overflow-y:auto；css属性工作。下面是我当前的布局:
我正在使用以下CSS/HTML代码创建它:
<div class="flex-items">
<div v-for="game in gamesData.games" class="card-spacing">
<!-- Contents -->
</div>
</div>
.flex-items {
flex: 1;
display: flex;
overflow: auto;
flex-direction: column;
}
.card-spacing {
margin-bottom: 10px;
min-height: min-content; /* needs vendor prefixes */
}
我当前的故障排除步骤:
overflow-y:scroll，则只显示停用的滚动条。有人对如何使滚动条出现有想法吗？
给容器。flex-items一个固定的height或max-height，只有当容器的内容超过容器的高度时，溢出才起作用
.flex-items {
flex: 1;
display: flex;
height: 500px // specify a height
max-height: 100%; // take up the full height of its own container
overflow: auto;
flex-direction: column;
}
如果子元素的总高度略微超过其父元素的高度，这将是最自然的。因此，您将拥有一个滚动条。
然后，您可能需要在父div上添加滚动事件处理程序:
function loadItems() {
// check scroll position
if (scrolledToBottom()) {
// fetch more items
}
}
const container = document.querySelector('.flex-items');
container.addEventListener('scroll', loadItems);
