malihu 自定义滚动条将 <div class='mCSB_draggerRail'></div> 在电子上的错误位置

Posted 2023-05-09

【中文标题】malihu 自定义滚动条将 <div class=\'mCSB_draggerRail\'></div> 在电子上的错误位置

【英文标题】：malihu custom scrollbar puts <div class='mCSB_draggerRail'></div> in wrong place on electronmalihu 自定义滚动条将 <div class='mCSB_draggerRail'></div> 在电子上的错误位置

【发布时间】：2020-08-04 20:09:01

【问题描述】：

malihu 自定义滚动条将 <div class='mCSB_draggerRail'></div> 在电子上的错误位置。 我查看了浏览器中的版本，它工作得很好。它生成的 html 代码如下所示：

<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>

但在电子本身中，它会在内部生成，这会导致奇怪的行为......

这是它在电子本身中产生的：

<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>

这是我用来实现这个滚动条的代码：

<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>

而且它在我运行它的任何时候都会给出Uncaught ReferenceError: jQuery is not defined 错误。我不知道发生了什么请帮忙。

附：如果需要任何东西来解开这个谜团，我会附上它。

【参考方案1】：

我解决了这个问题。

Jinixx 上传了针对此问题的修复： malihu-custom-scrollbar-plugin 3.1.7

这个问题是由新的 jQuery 3.5.x 引起的，其中包括一些重大更改。 (source)

【讨论】：

我下载并替换了 jquery.mCustomScrollbar.min css 和 js 文件，但这种行为仍然存在（mCSB_draggerRail inside）