Remove malihu-custom-scrollbar-plugin and use native scrollbars

docs/en/framework/ui/mvc-razor-pages/overall.md

@@ -64,7 +64,6 @@ There are a set of standard JavaScript/CSS libraries that comes pre-installed an
 - [bootstrap-datepicker](https://github.com/uxsolutions/bootstrap-datepicker) to show date pickers.
 - [Select2](https://select2.org/) for better select/combo boxes.
 - [Timeago](http://timeago.yarp.com/) to show automatically updating fuzzy timestamps.
-- [malihu-custom-scrollbar-plugin](https://github.com/malihu/malihu-custom-scrollbar-plugin) for custom scrollbars.
 
 You can use these libraries directly in your applications, without needing to manually import your page.
 

docs/en/framework/ui/mvc-razor-pages/theming.md

@@ -51,7 +51,6 @@ All the themes must depend on the [@abp/aspnetcore.mvc.ui.theme.shared](https://
 * [bootstrap-datepicker](https://github.com/uxsolutions/bootstrap-datepicker) to show date pickers.
 * [Select2](https://select2.org/) for better select/combo boxes.
 * [Timeago](http://timeago.yarp.com/) to show automatically updating fuzzy timestamps.
-* [malihu-custom-scrollbar-plugin](https://github.com/malihu/malihu-custom-scrollbar-plugin) for custom scrollbars.
 
 These libraries are selected as the base libraries and available to the applications and modules.
 

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/Bundling/SharedThemeGlobalScriptContributor.cs

@@ -7,7 +7,6 @@
 using Volo.Abp.AspNetCore.Mvc.UI.Packages.JQueryValidationUnobtrusive;
 using Volo.Abp.AspNetCore.Mvc.UI.Packages.Lodash;
 using Volo.Abp.AspNetCore.Mvc.UI.Packages.Luxon;
-using Volo.Abp.AspNetCore.Mvc.UI.Packages.MalihuCustomScrollbar;
 using Volo.Abp.AspNetCore.Mvc.UI.Packages.Select2;
 using Volo.Abp.AspNetCore.Mvc.UI.Packages.SweetAlert2;
 using Volo.Abp.AspNetCore.Mvc.UI.Packages.Timeago;
@@ -23,7 +22,6 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Bundling;
     typeof(Select2ScriptContributor),
     typeof(DatatablesNetBs5ScriptContributor),
     typeof(Sweetalert2ScriptContributor),
-    typeof(MalihuCustomScrollbarPluginScriptBundleContributor),
     typeof(LuxonScriptContributor),
     typeof(TimeagoScriptContributor),
     typeof(BootstrapDatepickerScriptContributor),

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/Bundling/SharedThemeGlobalStyleContributor.cs

@@ -5,7 +5,6 @@
 using Volo.Abp.AspNetCore.Mvc.UI.Packages.Core;
 using Volo.Abp.AspNetCore.Mvc.UI.Packages.DatatablesNetBs5;
 using Volo.Abp.AspNetCore.Mvc.UI.Packages.FontAwesome;
-using Volo.Abp.AspNetCore.Mvc.UI.Packages.MalihuCustomScrollbar;
 using Volo.Abp.AspNetCore.Mvc.UI.Packages.Select2;
 using Volo.Abp.Modularity;
 
@@ -16,7 +15,6 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Bundling;
     typeof(BootstrapStyleContributor),
     typeof(FontAwesomeStyleContributor),
     typeof(Select2StyleContributor),
-    typeof(MalihuCustomScrollbarPluginStyleBundleContributor),
     typeof(DatatablesNetBs5StyleContributor),
     typeof(BootstrapDatepickerStyleContributor),
     typeof(BootstrapDaterangepickerStyleContributor)

modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/Index.cshtml

@@ -10,7 +10,6 @@
 @using Volo.Abp.AspNetCore.Mvc.UI.Layout
 @using Volo.Abp.AspNetCore.Mvc.UI.Packages.Anchor
 @using Volo.Abp.AspNetCore.Mvc.UI.Packages.Clipboard
-@using Volo.Abp.AspNetCore.Mvc.UI.Packages.MalihuCustomScrollbar
 @using Volo.Abp.AspNetCore.Mvc.UI.Packages.Popper
 @using Volo.Abp.AspNetCore.Mvc.UI.Packages.Prismjs
 @using Volo.Abp.AspNetCore.Mvc.UI.Theming
@@ -38,7 +37,6 @@
 @section styles {
     <abp-style-bundle name="@typeof(IndexModel).FullName">
         <abp-style type="@typeof(PrismjsStyleBundleContributor)"/>
-        <abp-style type="@typeof(MalihuCustomScrollbarPluginStyleBundleContributor)"/>
         <abp-style src="/Pages/Documents/Shared/Styles/vs.css"/>
         <abp-style src="/Pages/Documents/Project/index.css"/>
         @if (DocsUiOptions.Value.EnableEnlargeImage)
@@ -64,7 +62,6 @@
                 }
         </script>
         <abp-script-bundle name="@typeof(IndexModel).FullName">
-            <abp-script type="@typeof(MalihuCustomScrollbarPluginScriptBundleContributor)"/>
             <abp-script type="@typeof(ClipboardScriptBundleContributor)"/>
             <abp-script type="@typeof(AnchorJsScriptBundleContributor)"/>
             <abp-script type="@typeof(PrismjsScriptBundleContributor)"/>
@@ -306,7 +303,7 @@
         <div class="docs-content">
             <div class="top-container mb-3">
                 <div class="w-100">
-                    <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb" class="mCustomScrollbar-1">
+                    <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                         <ol class="breadcrumb" id="document-node-wrapper">
                             <li class="breadcrumb-item">
                                 <a href="@Model.CreateVersionLink(Model.LatestVersionInfo, Model.GetSpecificVersionOrLatest())"><i class="fa fa-home"></i></a>

modules/docs/src/Volo.Docs.Web/Pages/Documents/Project/index.js

@@ -90,16 +90,16 @@ var doc = doc || {};
             var filterDocumentItems = function (filterText) {
 
                 $navigation
-                    .find('.mCSB_container .opened')
+                    .find('.opened')
                     .removeClass('opened');
                 $navigation
-                    .find('.mCSB_container > li, .mCSB_container > li ul')
+                    .find('> li, > li ul')
                     .hide();
 
                 if (!filterText) {
-                    $navigation.find('.mCSB_container > li').show();
+                    $navigation.find('> li').show();
                     $navigation
-                        .find('.mCSB_container .selected-tree > ul')
+                        .find('.selected-tree > ul')
                         .show();
                     $searchAllDocument.hide();
                     return;

modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Scripts/vs.js

@@ -61,8 +61,6 @@
         };
 
         $(document).ready(function () {
-            handleCustomScrolls();
-
             var $myNav = $('#docs-sticky-index');
 
             if ($myNav.length === 0) {
@@ -123,30 +121,8 @@
             initMenuToggle();
             scrollToHashLink();
         });
-
-        $(window).resize(function () {
-            handleCustomScrolls();
-        });
     });
 
-    function handleCustomScrolls() {
-        $('#sidebar-scroll').mCustomScrollbar({
-            theme: 'minimal',
-            alwaysShowScrollbar: 0,
-        });
-
-        $('#scroll-index').mCustomScrollbar({
-            theme: 'minimal-dark',
-            alwaysShowScrollbar: 0,
-        });
-
-        $('.mCustomScrollbar-1').mCustomScrollbar({
-            theme: 'minimal-dark',
-            alwaysShowScrollbar: 0,
-            horizontalScroll: true,
-        });
-    }
-
      function initMenuToggle() {
         $('li:not(.last-link) a.tree-toggle').off('click');
         $('li:not(.last-link) span.plus-icon i.fa-chevron-right').off('click');

modules/docs/src/Volo.Docs.Web/Pages/Documents/Shared/Styles/vs.scss

@@ -63,13 +63,6 @@ body {
         }
     }
 
-    .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
-    .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
-        opacity: 1 !important;
-        filter: 'alpha(opacity=1)';
-        -ms-filter: 'alpha(opacity=1)';
-    }
-
     // the options-header only exists to host the floating button; hide it while the bar is inline
     // (non-scrolled), so the inline bar keeps its original look. It reappears once .scrolledMore collapses.
     .alert-criteria .options-header {
@@ -419,6 +412,8 @@ body {
                 display: block;
                 height: calc(100vh - 350px);
                 overflow-y: auto;
+                scrollbar-width: thin;
+                scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
                 margin-right: -4px !important;
                 margin-top: 20px !important;
             }
@@ -531,9 +526,6 @@ body {
                     }
                 }
             }
-                .mCSB_scrollTools{
-                    right: -20px;
-                }
         }
     }
 
@@ -563,6 +555,7 @@ body {
                     margin-bottom: 0;
                     flex-wrap: nowrap;
                     overflow-x: auto;
+                    scrollbar-width: thin;
                     white-space: nowrap;
                     padding-bottom: 10px;
 
@@ -915,6 +908,8 @@ body {
 
         #scroll-index {
             max-height: 38vh;
+            overflow-y: auto;
+            scrollbar-width: thin;
         }
 
         .scroll-top-btn {

modules/feature-management/src/Volo.Abp.FeatureManagement.Web/Pages/FeatureManagement/feature-management-modal.css

@@ -4,8 +4,12 @@
 
 .custom-scroll-content {
     max-height: 400px;
+    overflow-y: auto;
+    scrollbar-width: thin;
 }
 
 .custom-scroll-container > .col-md-4 {
     max-height: 500px;
+    overflow-y: auto;
+    scrollbar-width: thin;
 }

modules/feature-management/src/Volo.Abp.FeatureManagement.Web/Pages/FeatureManagement/feature-management-modal.js

@@ -100,15 +100,6 @@ var abp = abp || {};
                         });
                     });
             });
-
-            $(function () {
-                $('.custom-scroll-content').mCustomScrollbar({
-                    theme: 'minimal-dark',
-                });
-                $('.custom-scroll-container > .col-md-4').mCustomScrollbar({
-                    theme: 'minimal-dark',
-                });
-            });
         };
     };
 })(jQuery);

modules/permission-management/src/Volo.Abp.PermissionManagement.Web/Pages/AbpPermissionManagement/permission-management-modal.js

@@ -295,15 +295,6 @@ var abp = abp || {};
                 });
             });
 
-            $(function () {
-                $('.custom-scroll-content').mCustomScrollbar({
-                    theme: 'minimal-dark',
-                });
-                $('.custom-scroll-container > .col-4').mCustomScrollbar({
-                    theme: 'minimal-dark',
-                });
-            });
-
             initSelectAllInThisTab();
             setSelectAllInAllTabs();