我正在通过 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
时,滚动条处于非活动状态。将 overflow-y 选项更改.tbox
为 auto 或 scroll 并不能解决问题。