如何在高度可变的容器中生成滚动？

.scrollable-container {
    width: 300px; /* 可以根据需要调整 */
    height: 200px; /* 可以根据需要调整 */
    overflow-y: auto; /* 垂直滚动 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
}

// 示例：使用原生JavaScript监听滚动事件
document.querySelector('.scrollable-container').addEventListener('scroll', function() {
    console.log('滚动位置:', this.scrollTop);
});

.scroll-item {
    will-change: transform; /* 提示浏览器提前优化 */
}

/* 自定义滚动条样式 */
.scrollable-container::-webkit-scrollbar {
    width: 10px;
}

.scrollable-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.scrollable-container::-webkit-scrollbar-thumb {
    background: #888;
}

.scrollable-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

// 示例：加载新内容后滚动到顶部
function loadNewContent() {
    // 加载内容的逻辑...
    document.querySelector('.scrollable-container').scrollTop = 0;
}