raffaelj
commented
4 years ago 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.
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');});