javascript - 删除元素时滚动行为 : smooth, 不工作

Question

我有一个由 div 制成的小 table ，上面有一个“添加新”按钮来添加新行，每行上有一个 x 按钮来删除该行。表格有一个最大高度，一旦达到这个高度就会在添加新行时滚动到底部。我已经在 css 中将滚动行为设置为平滑，这样一旦达到表格的最大高度，用户就可以看到添加和删除行。如果添加新行，这会很好地工作，但是当删除底部的行时，这根本不起作用。我已尝试添加最少量的代码来重现该问题。

我尝试过使用 jquery animate 和 intervals，但是无法在删除一行时显示滚动条。

//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);
}

.products-lines-box {
  display: inline-block;
  width: 50%;
  margin-left: 14px;
  max-height: 90px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.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>

Answer 1

删除其中的元素时，元素滚动不流畅，因为元素无法滚动到其底部以下。即 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>