时间戳

首页 > 解决方案 > 如何使列表组在 div 内滚动而不是包装它的高度？

html - 如何使列表组在 div 内滚动而不是包装它的高度？

问题描述

我的网页中有一个看起来像收据的 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 达到最大高度时，我怎么能制作可滚动的组列表呢？

标签： htmlcssbootstrap-4

解决方案

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

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

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

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

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

推荐阅读