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

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

Answer 2

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

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

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

2 个答案: