How to integrating with Simplebar

coisox

I tried to replace the original scrollbar with Simplebar (https://github.com/Grsmto/simplebar) like this:

$('.dataTables_scrollBody').each(function(){
    new SimpleBar($(this)[0], { autoHide: false });
});

The Simplebar appear on the .dataTables_scrollBody, but:
1. Some of the Simplebar is hidden behind the .DTFC_LeftWrapper
2. When I scroll using the Simplebar, only the body scroll. The header (.dataTables_scrollHeadInner) no scroll.

Generally I understand why those happen but what the efficient way to overcome those? This what in my mind which I think is very ugly:

For problem #1, make the table higher before initializing the Simplebar. Then hide the native scrollbar (using overflow-y hidden maybe).

For problem #2, each time I scroll Simplebar, i have to javascript scroll the .dataTables_scrollHeadInner as well. Other way is figure out how to combine the header and body into single element. I don't use sticky header so I don't understand why they are seperated.