Question

我有一个可滚动的 div，我在其中动态附加了一些项目，在每个附加项目上我滚动到最后一个以保持最后一个项目可见，但是在我添加 X 个项目后，滚动只会通过向下和向上滚动而中断。< /p>

function addProdotto(prodotto) {
  $(".prodotti").append(
    $("<div>", { class: "prodotto" })
      .text(prodotto.desc)
      .append(
        $("<span>").text(prodotto.prezzo),
        prodotto.promo &&
          $("<div>", { class: "promo" })
            .text(prodotto.promo.desc)
            .append($("<span>").text(prodotto.promo.prezzo))
      )
  );
  $(".prodotti").animate({ scrollTop: $(".prodotto").last().offset().top });
}

$('.addProducts').on('click', function() {
addProdotto({ desc: "TEST", prezzo: "2.00€", promo: { desc: "PROMO 20%", prezzo: "0.20€" } });
})

.header {
    background-color: red;
    height: 80px;
}

.prodotti {
    padding: 1rem;
  height: calc(100vh - 160px);
  overflow: auto;
}

.bottom {
    height: 80px;
    background-color: blue;
}

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
    <button type="button" class="addProducts">
      ADD
    </button>
    <div class="row">
      <div class="col-sm-4">
        <div class="row">
          <div class="col-sm-12 header">

          </div>
          <div class="col-sm-12 main">
            <div class="prodotti">

            </div>
          </div>
          <div class="col-sm-12 bottom">

          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

正如您在添加大量项目后所看到的那样，滚动会中断并停止滚动到最后一个项目，然后上下移动..

Answer 1

我已经解决了这个问题，方法是直接在 $('.prodotti') 上添加新项目并使用 .prop('scrollHeight') 执行 .animate，所以我的解决方案如下所示：

function addProdotto(prodotto) {
  $(".prodotti").append(
    $("<div>", { class: "prodotto" })
      .text(prodotto.desc)
      .append(
        $("<span>").text(prodotto.prezzo),
        prodotto.promo &&
          $("<div>", { class: "promo" })
            .text(prodotto.promo.desc)
            .append($("<span>").text(prodotto.promo.prezzo))
      )
  )  .animate({ scrollTop: $(".prodotti").prop("scrollHeight") }, "slow");
}

在 X 个附加项目后滚动到最后一个附加项目中断

1 个答案: