Scroll bar did't get updated the height when data changed via ajax

Question

I have some problem width a scroll bar. Here is my code,

Css code :

#content-wrapper{
    position: relative;
    overflow-y : auto;
    overflow-x : hidden;
    width: 100%;
    height: 100%;
}

HTML code :

<div id="content-wrapper">
    <ul id="my-ul">
        <li>data</li>
        .
        .
    </ul>
</div

This work normally

But When I got new data to bind to ul as below,

$.ajax({
    type : 'GET',
    url : '/api/somedata',
    success : function(data){
       $('#my-ul').empty();     //clear old data.
       _.each(data, function(myItem){
          $('#my-ul').append('<li>'+myItem.name+'</li>');
       });
    }
});

My problem is new data that were bind to ul tag are less than the older but scrollbar did't get updated. There is a empty space in content-wrapper tag. It still remember the older height.

When you say `height:100%`, it will occupy all available height of the screen,once there's no more space it will show scrollbar. — Mox Shah, Apr 21 '15 at 05:15

score 0 · Answer 1 · answered Apr 21 '15 at 06:13

Hopefully by doing an update, it will work for you.

$.ajax({
    type : 'GET',
    url : '/api/somedata',
    success : function(data){
       $('#my-ul').empty();     //clear old data.
       _.each(data, function(myItem){
          $('#my-ul').append('<li>'+myItem.name+'</li>');
       });
       $('#your-id').perfectScrollbar('update');
    }
});

Scroll bar did't get updated the height when data changed via ajax

1 Answers1