滚动行为：平滑，在删除元素时不起作用

Question

我有一张用div制成的小桌子，上面有一个“添加新”按钮以添加新行，每行有一个x按钮以删除该行。该表具有最大高度，添加新行时，一旦达到最大高度，滚动到底部。我将滚动行为设置为在CSS中平滑，以便一旦达到表格的最大高度，用户便可以看到添加和删除的行。如果添加了新行，则此方法效果很好，但是当从底部删除一行时，则根本不起作用。我尝试添加最少的代码来复制问题。我尝试使用jquery动画和间隔，但无法显示滚动条删除时的滚动条。//ADD NEW LINE//function addNewLine() {  var productsLinesBox = document.getElementsByClassName("products-lines-box");  var productItemLine = document.createElement("div");  productItemLine.classList.add("product-item-line");  productsLinesBox[0].appendChild(productItemLine);  var productItemSKU = document.createElement("div");  var spn = document.createElement("span");  productItemSKU.classList.add("product-item", "sku");  productItemLine.appendChild(productItemSKU);  productItemSKU.appendChild(spn);  var productItemName = document.createElement("div");  var spn1 = document.createElement("span");  productItemName.classList.add("product-item", "name");  productItemLine.appendChild(productItemName);  productItemName.appendChild(spn1);  var productItemQty = document.createElement("div");  var spn2 = document.createElement("span");  productItemQty.classList.add("product-item", "qty");  productItemLine.appendChild(productItemQty);  productItemQty.appendChild(spn2);  var productItemPrice = document.createElement("div");  var spn3 = document.createElement("span");  productItemPrice.classList.add("product-item", "price");  productItemLine.appendChild(productItemPrice);  productItemPrice.appendChild(spn3);  var productItemDelete = document.createElement("div");  var spn4 = document.createElement("span");  productItemDelete.classList.add("product-item", "delete");  spn4.innerHTML = "x";  spn4.onclick = function() {    deleteThis(this.parentNode.parentNode);  }  productItemLine.appendChild(productItemDelete);  productItemDelete.appendChild(spn4);  productsLinesBox[0].scrollTop = productsLinesBox[0].scrollHeight;}//DELETE LINE//function deleteThis(productLine) {  productLine.parentNode.removeChild(productLine);}

Answer 1

对于寻求解决方案的其他任何人。伍特的答案非常有效。我添加了额外的阶段以提供额外的平滑度。

.products-lines-box.deleting1::after {  content: '';
  display: block;
  width: 100%;
  height: 36px;
  clear: both;}.products-lines-box.deleting2::after {
  content: '';
  display: block;
  width: 100%;
  height: 24px;
  clear: both;}.products-lines-box.deleting3::after {
  content: '';
  display: block;
  width: 100%;
  height: 12px;
  clear: both;}

    function deleteThis(productLine) {        var productsLinesBox = document.getElementsByClassName("products-lines-box")[0];
        productsLinesBox.classList.add('deleting1');
        productsLinesBox.removeChild(productLine);
        productsLinesBox.scrollTop = productsLinesBox.children.length * 36 - 90;        setTimeout(function () {
            productsLinesBox.classList.replace('deleting1', 'deleting2')
        }, 200)        setTimeout(function () {
            productsLinesBox.classList.replace('deleting2', 'deleting3')
        }, 250)        setTimeout(function () {
            productsLinesBox.classList.remove('deleting3')
        }, 300)
    }

Answer 2

删除元素中的元素时，元素滚动不流畅，因为元素不能滚动到其底部以下。即scrollTop永远不能大于(scrollHeight - offsetHeight)。将项目添加到列表时，scrollHeight列表的会增加，因此，元素可以平滑滚动到其新位置。为了使元素在删除线时平滑滚动，您必须临时增加元素的高度，向上滚动线的高度，然后减小元素的高度。可以这样完成：（我已经尝试过尽可能多地重用您的代码）

//ADD NEW LINE//

var productLinesBox = document.getElementsByClassName("products-lines-box")[0];

function addNewLine() {

  var productItemLine = document.createElement("div");

  productItemLine.classList.add("product-item-line");

  productLinesBox.appendChild(productItemLine);

  var productItemSKU = document.createElement("div");

  var spn = document.createElement("span");

  productItemSKU.classList.add("product-item", "sku");

  productItemLine.appendChild(productItemSKU);

  productItemSKU.appendChild(spn);

  var productItemName = document.createElement("div");

  var spn1 = document.createElement("span");

  productItemName.classList.add("product-item", "name");

  productItemLine.appendChild(productItemName);

  productItemName.appendChild(spn1);

  var productItemQty = document.createElement("div");

  var spn2 = document.createElement("span");

  productItemQty.classList.add("product-item", "qty");

  productItemLine.appendChild(productItemQty);

  productItemQty.appendChild(spn2);

  var productItemPrice = document.createElement("div");

  var spn3 = document.createElement("span");

  productItemPrice.classList.add("product-item", "price");

  productItemLine.appendChild(productItemPrice);

  productItemPrice.appendChild(spn3);

  var productItemDelete = document.createElement("div");

  var spn4 = document.createElement("span");

  productItemDelete.classList.add("product-item", "delete");

  spn4.innerHTML = "x";

  spn4.onclick = function() {

    deleteThis(this.parentNode.parentNode);

  }

  productItemLine.appendChild(productItemDelete);

  productItemDelete.appendChild(spn4);

  productLinesBox.scrollTop = productLinesBox.scrollHeight;

}

//DELETE LINE//

function deleteThis(productLine) {

  productLinesBox.classList.add('deleting');

  productLinesBox.removeChild(productLine);

  productLinesBox.scrollTop = productLinesBox.children.length * 36 - 90;

  setTimeout(function () {

     productLinesBox.classList.remove('deleting')

  }, 500)

}

.products-lines-box {

  display: inline-block;

  width: 50%;

  margin-left: 14px;

  max-height: 90px;

  overflow-y: auto;

  scroll-behavior: smooth;

}

.products-lines-box.deleting::after {

  content: '';

  display: block;

  width: 100%;

  height: 36px;

  clear: both;

}

.products-lines-box::-webkit-scrollbar {

  display: none;

}

.product-item-line {

  display: block;

  width: 100%;

  max-height: 34px;

}

.product-item {

  display: inline-block;

  float: left;

  height: 34px;

  border: 1px solid black;

}

.product-item.sku {

  width: 80%;

  margin-left: 0;

}

.product-item.delete {

  width: 20px;

}

.product-item.delete span {

  font-size: 18px;

}

.new-line-box {

  display: inline-block;

  width: calc(55% - 14px);

  margin: 6px 0 0 14px;

}

.new-line-btn {

  display: inline-block;

  float: left;

  padding: 4.5px 8px 4.5px 8px;

  color: black;

  font-family: sans-serif;

  font-size: 11.5px;

  border: 0.5px solid black;

}

<div class="products-lines-box">

  <div class="product-item-line">

    <div class="product-item sku">

      <span></span>

    </div>

    <div class="product-item delete">

    </div>

  </div>

</div>

<div class="new-line-box">

  <button type="button" id="newLineBtn" class="new-line-btn" onclick="addNewLine()">

      <span>Add new line</span>

    </button>

</div>