m.Custom scrollbar not working in RTL Mode

Question

I have made a website ( static for just now ) and I have used scroll bar for displaying recent post in a widget it has vertical and horizontal scrollbar both. The base of the website is bootstrap 4.1.3 and all the thing works fine in ltr mode.

But when I converted it to rtl, the scrollbar ( i.e. m.customscrollbar ) default position stick to the left side instead of right by default and it does not change.

Here is my js code

$("selector").mCustomScrollbar({
    axis:"yx", // vertical and horizontal scrollbar
    autoHideScrollbar:true
});

NOTE:- I have applied this class (at the body tag) to make it rtl.

.rtl {
    text-align: right;
    direction: rtl;
}

I have already used dir="rtl" attribute to make it rtl but still it does`nt work.

UPDATE:

When I apply jquery 2.1.3 or 1.11.1 it works but when I apply 3.1.1 or 3.3.1 it does`nt works.

Here is working examples:-

with jquery 1.11.1 - example 1 (working)

with jquery 2.1.3 - example 2 (working)

with jquery 3.3.1 - example 3 (not working)

Including your example it does`nt work on jquery 3.3.1