3

malihu カスタム スクロールバーが<div class='mCSB_draggerRail'></div>electron の間違った場所に配置されます。ブラウザでバージョンを確認したところ、問題なく動作しました。生成される 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実行するたびにエラーが発生します。何が起こっているのかわかりません。助けてください。

PS この謎を解くために必要なものがあれば、添付します。

4

1 に答える 1