如何使列表组在 div 内滚动而不是包装其高度？

Question

我的网页中有一个看起来像收据的div，因为div会动态添加X个项目，对于图形内容，它的全高应该是95%，问题是当div达到屏幕高度的95%并添加新项目时，整个页面都可以滚动，而我只想滚动添加项目的列表组。

以下是我的布局：

var prodotti = [
{ desc: "Prosciutto", qta: 2, prezzo: 2 },
{ desc: "Carne", qta: 1, prezzo: 15 },
{ desc: "Pomodori", qta: 6, prezzo: 3 },
{ desc: "Pandoro", qta: 5, prezzo: 22 },
{ desc: "Yougurt", qta: 3, prezzo: 5 },
];

$(".totale").on("click", function () {
$(".btn-finish").removeAttr("disabled");
$(".list-group").append(
$("<li>", {
class: "list-group-item d-flex justify-content-between",
}).append(
$("<span>", { class: "desc" }).text(prodotti[0].desc),
$("<span>", { class: "qta" }).text(prodotti[0].qta),
$("<span>", { class: "prezzo" }).text(prodotti[0].prezzo)
)
);
});

html, body {
height: 100%;
}
.scontrino {
position: relative;
background: #f8f7f5;
max-height: 95%;
padding: 1rem;
font-size: 1.4rem;
}
.scontrino:after {
content: " ";
display: block;
height: 24px;
position: absolute;
left: 0;
right: 0;
}
.scontrino:after {
bottom: -14px;
background: linear-gradient(135deg, #fcfcfb 25%, transparent 25%), linear-gradient(225deg, #fcfcfb 25%, transparent 25%), linear-gradient(315deg, #00383e 25%, transparent 25%) -7px 0, linear-gradient(45deg, #00383e 25%, transparent 25%) -7px 0;
background-size: 24px 24px;
background-color: #dcdcdb;
}
.list-group-item {
border-color: #fff;
border-radius: 0.25rem;
margin-bottom: 1rem;
border-top-width: 1px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<div class="row h-100">
<div class="col-5">
<div class="scontrino">
<h4>Il tuo carrello</h4>
<hr />
<ul class="list-group"></ul>
<div class="alert alert-dark totale" role="alert">
Totale
<span class="price float-right">€0.00</span>
</div>
<div class="alert alert-success" role="alert">
Fidelity
<span class="float-right">001230013212</span>
</div>
</div>
</div>
<div class="col-7">
STUFF
</div>
</div>

要动态添加项目，只需按下带有类的暗灯按钮。totale

那么，当.scontrini达到它的最大高度时，我怎么能制作可滚动的群组列表呢？

Answer 1

我添加了以下css使列表组可以滚动：

.list-group{
overflow:scroll;
-webkit-overflow-scrolling: touch;
}

然后在页面加载时，我将列表组的高度设置为容器的高度减去静态元素的高度，如下所示：

var height = $(".scontrino").height();
$(".list-group").css("max-height", height - 250);

之后，通过将高度动态设置为.list组，它就可以正常工作了。