jQuery追加到嵌套的div不滚动

Question

我通过AJAX请求拉入一些JSON内容，但是当我尝试将它追加到嵌套的div时，它不滚动 - 滚动条出现，但它不活动。

<style> 
.tbox { 
    width:440px; 
    height: 500px; 
    background-color:white; 
    border:1px solid #E8E8E8; 
    border-color:rgba(0,0,0,0.1); 
    border-radius:5px; 
    position:relative; 
    -moz-box-shadow:3px 3px 14px #000; 
    -webkit-box-shadow:3px 3px 14px #000; 
    box-shadow:3px 3px 14px #000; 
    margin:20px 0 0 50px; 
    overflow: hidden; 
} 
.tbox .tbox-header { 
    padding:12px; 
    border-bottom:1px solid #E8E8E8; 
    border-bottom-color:rgba(0,0,0,0.1); 
    width: 100%; 
    height: auto; 
    overflow: hidden; 
} 
h1.ttitle { 
    font-size:18px; 
    line-height:18px; 
    font-weight:bold; 
} 
.tbox .tbox-body { 
    width: 100%; 
    height: auto; 
    overflow-x:hidden; 
    overflow-y: scroll; 
    position: relative; 
} 
ol { 
    list-style-type:none; 
    padding:2px; 
} 
ol li { 
    clear:both; 
    border-bottom:1px solid #E8E8E8; 
    border-color:rgba(0,0,0,0.1); 
    margin-bottom:15px; 
    overflow:hidden; 
    width:auto; 
    height:auto; 
} 
</style> 
<div class="tbox"> 
    <div class="tbox-header"> 
     <h1 class="ttitle">My Title</h1> 
    </div> 
    <div class="tbox-body"> 
     <ol> 
     </ol> 
    </div> 
</div> 

<script> 
$.ajax({ 
    type: "GET", 
    url: "[my PHP api]", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function (data) { 
     $.each(data, function (i, t) { 
      $('.tbox-body ol').append(t.content); 
     }); 
    } 
}); 
</script> 

如果我删除了两个嵌套类（.tbox-header和.tbox-body）和直接附加到.tbox它工作正常，但是当我尝试追加内容到div嵌套.tbox-body滚动条是无效的。将.tbox上的溢出-y选项更改为自动或滚动不能解决问题。

Answer 1

您遇到的问题是tbox-body不知道它需要滚动的点。 tbox设置为500px的固定高度。最简单的解决方案是计算tbox-tbody的可用高度，并将其高度设置为css。

作为概念证明快，如果你改变了.tbox-tbody来自：

height:auto; 

到：

height:300px; 

你应该看到，现在春联。一旦你在tbox-tbody上设置了一个预定的高度，它也消除了你对元素的各种overflow:hidden的需求。您只需要在tbox-tbody上指定overflow属性。