當元素被移除時，可滾動的div容器消失

我建立了此頁面。我爲帳戶使用可滾動的div容器。如果我調整屏幕的大小以使滾動條出現，然後刪除帳戶元素（通過點擊它們）直到不需要滾動條，整個容器就會消失。當元素被移除時，可滾動的div容器消失

將位置設置爲靜態可以修復此問題，但在整個頁面中我使用可拖動，並且當我將leftWrap容器設置爲位置固定時，我無法將拖動器拖出容器。

另一個奇怪的事情是，如果在容器消失後手動刪除chrome調試器中的帳戶元素，它將重新出現。通過chrome調試器添加css可以做同樣的事情。

有沒有人對這種情況發生的原因有所瞭解，以及我如何解決它？

<!DOCTYPE html> 
<html> 
<head> 
<title>Test Page</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
</head> 
<style> 
    body{ 
     overflow:hidden; /* hide scrollbar from main element */ 
    } 

    .myDraggable { 
     width: 15em; 
     height: 2.5em; 
     border:1px solid #999; 
     text-align:center; 
     cursor: pointer; 
     padding: 0em; 
     margin-bottom:.5em; 
     background-color:#99ff99; 
     position: static; 
    } 

    #wrapLeft{ 
     float:left; 
     padding-left:10%; 
     height: 95vh; 
     overflow-y: scroll; 
     /*position: ; fixed /* why does this fix the problem? */ 
    } 

    .account{ 
     display:block; 
     font-size: 70%; 
     padding-bottom: .15em; 
     padding-top: .4em; 
     padding-left: 1em; 
     padding-right:1em; 
    } 

</style> 
<body> 
<div id="wrapLeft" style="z-index: 1;"> 
    <div class="myDraggable " id="15"> 
     <span class="account"> 0 
     </span> 
    </div> 

    <div class="myDraggable " id="16"> 
     <span class="account"> 1 
     </span> 
    </div> 

    <div class="myDraggable " id="17"> 
     <span class="account"> 2 
     </span> 
    </div> 

    <div class="myDraggable " id="18"> 
     <span class="account"> 3 
     </span> 
    </div> 

    <div class="myDraggable " id="19"> 
     <span class="account"> 4 
     </span> 
    </div> 

    <div class="myDraggable " id="20"> 
     <span class="account"> 5 
     </span> 
    </div> 

    <div class="myDraggable " id="21"> 
     <span class="account"> 6 
     </span> 
    </div> 

    <div class="myDraggable " id="22"> 
     <span class="account"> 7 
     </span> 
    </div> 

    <div class="myDraggable " id="23"> 
     <span class="account"> 8 
     </span> 
    </div> 

    <div class="myDraggable " id="24"> 
     <span class="account"> 9 
     </span> 
    </div> 

    <div class="myDraggable " id="25"> 
     <span class="account"> 10 
     </span> 
    </div> 

    <div class="myDraggable " id="26"> 
     <span class="account"> 11 
     </span> 
    </div> 

    <div class="myDraggable " id="27"> 
     <span class="account"> 12 
     </span> 
    </div> 

    <div class="myDraggable " id="28"> 
     <span class="account"> 13 
     </span> 
    </div> 

    <div class="myDraggable " id="29"> 
     <span class="account"> 14 
     </span> 
    </div> 
</div> 

<script> 

$('.myDraggable').click(function(){ 
    $(this).remove(); 
    console.log('click'); 

}); 
</script>

來源

2015-10-10 Elliot

無法在共享代碼的最新版本的chrome中重現該問題。刪除jqueryui標籤，因爲它根本沒有使用。 –

拆除的float:left;的#wrapLeft解決了這個。不過，我不知道爲什麼。

來源

2015-10-10 15:37:56 Elliot

我在代碼中沒有看到任何帶有id'leftWrap'的東西... –

好的。我打算輸入#wrapLeft – Elliot

我想我想通了。只需在頁面加載並設置固定寬度時獲取容器的渲染寬度即可。只要你不在你的腳本中做任何事情（稍後），它將改變容器或內部元素的寬度。

//wait until the page loads 
 
window.onload = function(){ 
 
    var renderedWidth = document.getElementById('wrapLeft').offsetWidth; 
 
    document.getElementById('wrapLeft').style.width = renderedWidth+'px'; 
 
    //collect the elements 
 
    var myDraggableElements = document.getElementsByClassName('myDraggable'); 
 
    for(var i = 0; i != myDraggableElements.length; i++){ 
 
    //when each element is clicked; remove it 
 
    myDraggableElements[i].onclick = function(){ 
 
     this.parentNode.removeChild(this); 
 
    }; 
 
    }; 
 
};

body{ 
 
    overflow:hidden; /* hide scrollbar from main element */ 
 
    } 
 

 
    .myDraggable { 
 
     width: 15em; 
 
     height: 2.5em; 
 
     border:1px solid #999; 
 
     text-align:center; 
 
     cursor: pointer; 
 
     padding: 0em; 
 
     margin-bottom:.5em; 
 
     background-color:#99ff99; 
 
     position: static; 
 
    } 
 

 
    #wrapLeft{ 
 
     float:left; 
 
     padding-left:10%; 
 
     height: 95vh; 
 
     overflow-y: scroll; 
 
     /*position: ; fixed /* why does this fix the problem? */ 
 
    } 
 

 
    .account{ 
 
     display:block; 
 
     font-size: 70%; 
 
     padding-bottom: .15em; 
 
     padding-top: .4em; 
 
     padding-left: 1em; 
 
     padding-right:1em; 
 
    }

<div id="wrapLeft" style="z-index: 1;"> 
 
     <div class="myDraggable " id="15"> 
 
      <span class="account"> 0 
 
      </span> 
 
     </div> 
 

 
     <div class="myDraggable " id="16"> 
 
      <span class="account"> 1 
 
      </span> 
 
     </div> 
 

 
     <div class="myDraggable " id="17"> 
 
      <span class="account"> 2 
 
      </span> 
 
     </div> 
 

 
     <div class="myDraggable " id="18"> 
 
      <span class="account"> 3 
 
      </span> 
 
     </div> 
 

 
     <div class="myDraggable " id="19"> 
 
      <span class="account"> 4 
 
      </span> 
 
     </div> 
 

 
     <div class="myDraggable " id="20"> 
 
      <span class="account"> 5 
 
      </span> 
 
     </div> 
 

 
     <div class="myDraggable " id="21"> 
 
      <span class="account"> 6 
 
      </span> 
 
     </div> 
 

 
     <div class="myDraggable " id="22"> 
 
      <span class="account"> 7 
 
      </span> 
 
     </div> 
 

 
     <div class="myDraggable " id="23"> 
 
      <span class="account"> 8 
 
      </span> 
 
     </div> 
 

 
     <div class="myDraggable " id="24"> 
 
      <span class="account"> 9 
 
      </span> 
 
     </div> 
 

 
     <div class="myDraggable " id="25"> 
 
      <span class="account"> 10 
 
      </span> 
 
     </div> 
 

 
     <div class="myDraggable " id="26"> 
 
      <span class="account"> 11 
 
      </span> 
 
     </div> 
 

 
     <div class="myDraggable " id="27"> 
 
      <span class="account"> 12 
 
      </span> 
 
     </div> 
 

 
     <div class="myDraggable " id="28"> 
 
      <span class="account"> 13 
 
      </span> 
 
     </div> 
 

 
     <div class="myDraggable " id="29"> 
 
      <span class="account"> 14 
 
      </span> 
 
     </div> 
 
    </div>

來源

2015-10-10 14:22:28 www139

這個答案實際上仍然有同樣的問題。從滾動div中移除元素，直到滾動條不必要爲止。至少在這個時候，容器消失了，至少在我的瀏覽器中。 – Elliot

你確定嗎？查看網絡檢查員，看看容器是否仍然存在。 – www139

我已經在Chrome中測試過它。該元素仍然存在，但我可以看到你的問題。我認爲這是一個CSS問題。 – www139

當元素被移除時，可滾動的div容器消失

回答

相關問題