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

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() {&nbsp; var productItemLine = document.createElement("div");&nbsp; productItemLine.classList.add("product-item-line");&nbsp; productLinesBox.appendChild(productItemLine);&nbsp; var productItemSKU = document.createElement("div");&nbsp; var spn = document.createElement("span");&nbsp; productItemSKU.classList.add("product-item", "sku");&nbsp; productItemLine.appendChild(productItemSKU);&nbsp; productItemSKU.appendChild(spn);&nbsp; var productItemName = document.createElement("div");&nbsp; var spn1 = document.createElement("span");&nbsp; productItemName.classList.add("product-item", "name");&nbsp; productItemLine.appendChild(productItemName);&nbsp; productItemName.appendChild(spn1);&nbsp; var productItemQty = document.createElement("div");&nbsp; var spn2 = document.createElement("span");&nbsp; productItemQty.classList.add("product-item", "qty");&nbsp; productItemLine.appendChild(productItemQty);&nbsp; productItemQty.appendChild(spn2);&nbsp; var productItemPrice = document.createElement("div");&nbsp; var spn3 = document.createElement("span");&nbsp; productItemPrice.classList.add("product-item", "price");&nbsp; productItemLine.appendChild(productItemPrice);&nbsp; productItemPrice.appendChild(spn3);&nbsp; var productItemDelete = document.createElement("div");&nbsp; var spn4 = document.createElement("span");&nbsp; productItemDelete.classList.add("product-item", "delete");&nbsp; spn4.innerHTML = "x";&nbsp; spn4.onclick = function() {&nbsp; &nbsp; deleteThis(this.parentNode.parentNode);&nbsp; }&nbsp; productItemLine.appendChild(productItemDelete);&nbsp; productItemDelete.appendChild(spn4);&nbsp; productLinesBox.scrollTop = productLinesBox.scrollHeight;}//DELETE LINE//function deleteThis(productLine) {&nbsp; productLinesBox.classList.add('deleting');&nbsp; productLinesBox.removeChild(productLine);&nbsp; productLinesBox.scrollTop = productLinesBox.children.length * 36 - 90;&nbsp; setTimeout(function () {&nbsp; &nbsp; &nbsp;productLinesBox.classList.remove('deleting')&nbsp; }, 500)}.products-lines-box {&nbsp; display: inline-block;&nbsp; width: 50%;&nbsp; margin-left: 14px;&nbsp; max-height: 90px;&nbsp; overflow-y: auto;&nbsp; scroll-behavior: smooth;}.products-lines-box.deleting::after {&nbsp; content: '';&nbsp; display: block;&nbsp; width: 100%;&nbsp; height: 36px;&nbsp; clear: both;}.products-lines-box::-webkit-scrollbar {&nbsp; display: none;}.product-item-line {&nbsp; display: block;&nbsp; width: 100%;&nbsp; max-height: 34px;}.product-item {&nbsp; display: inline-block;&nbsp; float: left;&nbsp; height: 34px;&nbsp; border: 1px solid black;}.product-item.sku {&nbsp; width: 80%;&nbsp; margin-left: 0;}.product-item.delete {&nbsp; width: 20px;}.product-item.delete span {&nbsp; font-size: 18px;}.new-line-box {&nbsp; display: inline-block;&nbsp; width: calc(55% - 14px);&nbsp; margin: 6px 0 0 14px;}.new-line-btn {&nbsp; display: inline-block;&nbsp; float: left;&nbsp; padding: 4.5px 8px 4.5px 8px;&nbsp; color: black;&nbsp; font-family: sans-serif;&nbsp; font-size: 11.5px;&nbsp; border: 0.5px solid black;}<div class="products-lines-box">&nbsp; <div class="product-item-line">&nbsp; &nbsp; <div class="product-item sku">&nbsp; &nbsp; &nbsp; <span></span>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="product-item delete">&nbsp; &nbsp; </div>&nbsp; </div></div><div class="new-line-box">&nbsp; <button type="button" id="newLineBtn" class="new-line-btn" onclick="addNewLine()">&nbsp; &nbsp; &nbsp; <span>Add new line</span>&nbsp; &nbsp; </button></div>