Question

I’m pulling in some JSON content via an AJAX request, but when I try to append it to a nested div it does not scroll – the scrollbar appears but it’s inactive.

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

If I delete the two nested classes (.tbox-header and .tbox-body) and append directly to .tbox it works fine, but when I try appending the content to the nested div .tbox-body the scrollbar is inactive. Changing the overflow-y options on .tbox to auto or scroll does not solve the issue.

Answer 1

The problem you are having is that the tbox-body doesn’t know at what point it needs to scroll. The tbox is set to a fixed height of 500px. The easiest solution is to calculate the available height of the tbox-tbody and set it’s height in css.

As a quick proof of concept, if you change the .tbox-tbody from:

height:auto;

to:

height:300px;

You should see that it now scrolls. Once you set a predetermined height on the tbox-tbody it also eliminates the need for the various overflow:hidden that you have on elements. You should only need to specify the overflow property on the tbox-tbody.