亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

滾動行為：平滑，在刪除元素時不起作用

滾動行為：平滑，在刪除元素時不起作用

qq_遁去的一_1 2021-05-19 17:18:53
我有一張用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);}
查看完整描述

2 回答

?
慕娘9325324

TA貢獻1783條經驗 獲得超4個贊

對于尋求解決方案的其他任何人。伍特的答案非常有效。我添加了額外的階段以提供額外的平滑度。

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


查看完整回答
反對 回復 2021-05-27
?
拉丁的傳說

TA貢獻1789條經驗 獲得超8個贊

刪除元素中的元素時，元素滾動不流暢，因為元素不能滾動到其底部以下。即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>


查看完整回答
反對 回復 2021-05-27
  • 2 回答
  • 0 關注
  • 190 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號