Question

我已经构建了这个页面。我为帐户使用可滚动的div容器。如果我调整屏幕大小以显示滚动条，则删除帐户元素（通过单击它们）直到不需要滚动条，整个容器消失。

将位置设置为静态修复此问题，但在整页中我使用了draggables，当我将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>

Answer 1

我想我明白了。只需在页面加载时设置容器的渲染宽度并设置固定宽度。只要您不在脚本（稍后）中执行任何可以更改容器宽度或内部元素的内容，它就会起作用。

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

Answer 2

删除float:left;的{{1}}解决了这个问题。不过我不知道为什么。

删除元素后，可滚动div容器消失

2 个答案: