How to refresh the scrollbars?

[MrLaursen]

I'm building a dynamic table based on JSON-data adding and removing columns to my table. Is there any way to refresh the scrollbars after the table content is loaded?

I added $('#double-scroll').doubleScroll({resetOnWindowResize: true}); that works fine if browser window is adjusted so I thought it could help using $('.double-scroll').trigger('resize.doubleScroll'); after the data is loaded without any luck.

HTML:
<div id="double-scroll" class="table-responsive">
<table class="table table-hover small" id="tbl-contacts">
<thead></thead>
<tbody></tbody>
</table>
</div>

Script:
$(document).ready(function() {
$('#double-scroll').doubleScroll({resetOnWindowResize: true});
loadContent();
$('.double-scroll').trigger('resize.doubleScroll');
});

[raffaelj]

I had the same problem. I use riot.js and the overflow container is hidden while loading some data via ajax requests. After fiddling a while with .trigger('resize.doubleScroll') I removed and reinitialized the whole thing after each update.

// pseudo code
load() {
    // do an ajax request or hide column without request and update the table
    update();
    doubleScroll();
}

doubleScroll() {

    // remove second scrollbar from dom (if present) because riot.js
    // hides the overflow-container from the dom and the jQuery selector
    // can't handle it correctly without re-initializing
    // https://github.com/avianey/jqDoubleScroll/issues/8
    App.$('.doubleScroll-scroll-wrapper').remove();

    // reinitialize doubleScroll
    App.$('.table-container .uk-overflow-container').doubleScroll({
        resetOnWindowResize: true,
    });

}

Maybe it helps, after I had to scratch my had for a few hours with a second scrollbar, that seemed to work, but didn't update after changing my dom dynamically.