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

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 <div class='mCSB_draggerRail'></div> 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)

[AlbeeTheLoli]

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