malihu custom scrollbar puts <div class='mCSB_draggerRail'></div> in wrong place on electron

[albee-official]

malihu custom scrollbar puts html <div class='mCSB_draggerRail'></div> in wrong place on electron. I looked at the versions in my browser and it works just fine. HTML Code it generates looks something like this:

<div class="servers-container mCustomScrollbar _mCS_1" style="overflow: auto;" data-mcs-theme="light-thick">
        <div id="mCSB_1" class="mCustomScrollBox mCS-light-thick mCSB_vertical mCSB_inside" style="max-height: none;"
            tabindex="0">
            <div id="mCSB_1_container" class="mCSB_container" style="position: relative; top: 0px; left: 0px;"
                dir="ltr">
                <div class="servers">
                </div>
            </div>
            <div id="mCSB_1_scrollbar_vertical"
                class="mCSB_scrollTools mCSB_1_scrollbar mCS-light-thick mCSB_scrollTools_vertical"
                style="display: block;">
                <div class="mCSB_draggerContainer">
                    <div id="mCSB_1_dragger_vertical" class="mCSB_dragger"
                        style="position: absolute; min-height: 30px; top: 0px; display: block; height: 372px; max-height: 495px;">
                        <div class="mCSB_dragger_bar" style="line-height: 30px;"></div>
                    </div>
                    <div class="mCSB_draggerRail"></div>
                </div>
            </div>
        </div>
    </div>

But in electron itself, it generates

inside <div id="mCSB_1_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; top: 0px; display: block; height: 372px; max-height: 495px;"> which leads to funky behaviour...

Here is what it generates in electron itself:

<div class="servers-container mCustomScrollbar _mCS_1" style="overflow: auto;" data-mcs-theme="light-thick">
        <div id="mCSB_1" class="mCustomScrollBox mCS-light-thick mCSB_vertical mCSB_inside" style="max-height: none;"
            tabindex="0">
            <div id="mCSB_1_container" class="mCSB_container" style="position: relative; top: 0px; left: 0px;"
                dir="ltr">
                <div class="servers">

                </div>
            </div>
            <div id="mCSB_1_scrollbar_vertical"
                class="mCSB_scrollTools mCSB_1_scrollbar mCS-light-thick mCSB_scrollTools_vertical"
                style="display: block;">
                <div class="mCSB_draggerContainer">
                    <div id="mCSB_1_dragger_vertical" class="mCSB_dragger"
                        style="position: absolute; min-height: 30px; display: block; height: 77px; max-height: 316px; top: 0px;">
                        <div class="mCSB_dragger_bar" style="line-height: 30px;"></div>
                        <div class="mCSB_draggerRail"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Here is code which i use to to "use" this scrollbar:

<script defer src="js/jquery.min.js"></script>
    <script defer src="js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script defer src="renderer.js"></script>
    <script>
        const $ = require('jquery');
        require("jquery-mousewheel")($);
        require("malihu-custom-scrollbar-plugin")($);

        (function($){
        $(window).load(function(){
            $(".horizontalScrollbar").mCustomScrollbar({
                    scrollButtons:{ enable:false },
                    horizontalScroll:true,
                    advanced:{autoExpandHorizontalScroll:true}
                });
            });
        });
    </script>

Also it gives Uncaught ReferenceError: jQuery is not defined error any time i run it. I have no idea what is going on pls help.

P.S. If anything is needed to solve this mystery, i'll attach it.

[Danil-Klimov]

I had such a problem on one of the projects. As it turned out, the problem was in the version of the jquery. This bug appears in jquery version 3.5.1. With version 3.4.1, everything works fine.

P.S. sorry for my English (Google Translate)

[jinixx]

652 yes it is because of jQuery 3.5.0 xss fix. I forked and fixed it.

[gvereido]

@jinixx thank you for the fix - it fixed this vertical scrollbar issue. It seem like new issue created with the horizontal scrollbar. First - left and right buttons disappeared. Width and max-width are calculated wrong. Second - the horizontal scrollbar drawn inside the div of the vertical scrollbar.

The code looks like this:

<div id="mCSB_2_scrollbar_vertical" class="mCSB_scrollTools mCSB_2_scrollbar mCS-dark-3 mCSB_scrollTools_vertical" style="display: block;"> <a href="#" class="mCSB_buttonUp" style="display: block;"/> <div class="mCSB_draggerContainer"> <div id="mCSB_2_dragger_vertical" class="mCSB_dragger" style="position: absolute; min-height: 30px; display: block; height: 76px; max-height: 723px; top: 0px;"> <div class="mCSB_dragger_bar" style="line-height: 30px;"/> </div> <div class="mCSB_draggerRail"/> <div id="mCSB_2_scrollbar_horizontal" class="mCSB_scrollTools mCSB_2_scrollbar mCS-dark-3 mCSB_scrollTools_horizontal" style="display: block;"> <div class="mCSB_draggerContainer"> <div id="mCSB_2_dragger_horizontal" class="mCSB_dragger" style="position: absolute; min-width: 30px; display: block; width: 10px; max-width: 6px; left: -2px;"> <div class="mCSB_dragger_bar"/> </div> <div class="mCSB_draggerRail"/> </div> </div> </div> <a href="#" class="mCSB_buttonDown" style="display: block;"/> </div>

[Oleksandr07]

I had such a problem on one of the projects. As it turned out, the problem was in the version of the jquery. This bug appears in jquery version 3.5.1. With version 3.4.1, everything works fine.

P.S. sorry for my English (Google Translate)

At what here jquery if in a script code these blocks go one after another http://joxi.ru/5md3QgJU8keJLr

[MaesKenobe]

I had the same issue today and we don't have a fix for 3.5.1 version, so, I create a function to move the rail to the proper place when the scrollbar is initialized.

I know it is not the best solution, but, it works in the meantime until we'll have a final fix.

function jQueryFix(el) {
        var $rail = el.find('.mCSB_draggerRail');
        var $target = el.find('.mCSB_draggerContainer');
        if ($rail.length > 0 && $rail.parent().hasClass('mCSB_dragger') ) {
             $rail.appendTo($target);
        }
}

const scrollbarConf = {
        callbacks:{
            onInit:function(){
                jQueryFix($(this));
            }
        }
};

[albee-official]

Switching to another version of jQuery fixed the issue. Thanks!