After utilizing an AJAX request to pull in JSON content, I encountered an issue where appending it to a nested div resulted in an inactive scrollbar - it appeared but could not be used.
<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>
When attempting to append the content to the nested div .tbox-body, the scrollbar remains inactive. However, if I remove the two nested classes (.tbox-header and .tbox-body) and directly append to .tbox, everything works as expected. Modifying the overflow-y properties of .tbox to auto or scroll does not seem to resolve the issue.