feat(Menu): improve scrollIntoView performance (#7423)

* refactor: 增强滚动视口逻辑

* refactor: 增强 dispose 逻辑

* refactor: 优化代码消除提示信息

* doc: 更新锚点滚动逻辑

* refactor: 重构代码

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Layout/ComponentLayout.razor.js

@@ -1,12 +1,12 @@
-export function scrollToAnchor() {
+export function scrollToAnchor() {
     const hash = decodeURI(location.hash)
     if (hash) {
         const anchor = hash.split('-')[0]
         const el = document.querySelector(anchor)
         if (el) {
             const handler = setTimeout(() => {
-                el.scrollIntoView({ behavior: 'smooth', block: 'start' })
                 clearTimeout(handler)
+                el.scrollIntoView({ behavior: 'smooth', block: 'start' })
             }, 1000)
         }
     }

src/BootstrapBlazor.Server/Components/Layout/NavMenu.razor.js

@@ -1,21 +1,19 @@
-import Data from "../../_content/BootstrapBlazor/modules/data.js"
+import Data from "../../_content/BootstrapBlazor/modules/data.js"
 import EventHandler from "../../_content/BootstrapBlazor/modules/event-handler.js"
 
 export function init(id) {
-    const navmenu = {
-        navbar: document.querySelector('.navbar-toggler'),
-        menu: document.querySelector('.sidebar-content')
-    }
-    Data.set(id, navmenu)
+    const navbar = document.querySelector('.navbar-toggler');
+    const menu = document.querySelector('.sidebar-content');
+    Data.set(id, { navbar, menu });
 
-    EventHandler.on(navmenu.navbar, 'click', () => {
-        navmenu.menu.classList.toggle('show')
+    EventHandler.on(navbar, 'click', () => {
+        menu.classList.toggle('show')
     })
-    EventHandler.on(navmenu.menu, 'click', '.nav-link', e => {
+    EventHandler.on(menu, 'click', '.nav-link', e => {
         const link = e.delegateTarget
         const url = link.getAttribute('href');
         if (url !== '#') {
-            navmenu.menu.classList.remove('show')
+            menu.classList.remove('show')
         }
     })
 }
@@ -24,6 +22,7 @@ export function dispose(id) {
     const data = Data.get(id);
     Data.remove(id);
 
-    EventHandler.off(data.navbar, 'click');
-    EventHandler.off(data.menu, 'click', '.nav-link');
+    const { navbar, menu } = data;
+    EventHandler.off(navbar, 'click');
+    EventHandler.off(menu, 'click', '.nav-link');
 }

src/BootstrapBlazor/Components/Menu/Menu.razor.cs

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
@@ -144,11 +144,11 @@ private string GetUrl()
         var url = Navigator.ToBaseRelativePath(Navigator.Uri);
         if (url.Contains('?'))
         {
-            url = url[..url.IndexOf("?")];
+            url = url[..url.IndexOf('?')];
         }
         if (url.Contains('#'))
         {
-            url = url[..url.IndexOf("#")];
+            url = url[..url.IndexOf('#')];
         }
         return url;
     }

src/BootstrapBlazor/Components/Menu/Menu.razor.js

@@ -1,4 +1,4 @@
-import { getTargetElement, getTransitionDelayDurationFromElement } from "../../modules/utility.js"
+import { getTargetElement, getTransitionDelayDurationFromElement } from "../../modules/utility.js"
 import Data from "../../modules/data.js"
 
 export function init(id) {
@@ -48,7 +48,7 @@ export function init(id) {
     }
     Data.set(id, menu)
 
-    scrollElementToView(menu.element)
+    scrollElementToView(menu)
 }
 
 export function update(id) {
@@ -74,19 +74,24 @@ export function update(id) {
         }
     });
 
-    scrollElementToView(menu.element)
+    scrollElementToView(menu)
 }
 
 export function scrollToView(id) {
     const menu = Data.get(id)
     if (menu) {
-        scrollElementToView(menu.element);
+        scrollElementToView(menu);
     }
 }
 
 export function dispose(id) {
     const menu = Data.get(id)
-    Data.remove(id)
+    Data.remove(id);
+
+    if (menu.handler) {
+        clearInterval(menu.handler);
+        menu.handler = null;
+    }
 
     menu.collapses.forEach(el => {
         const target = getTargetElement(el)
@@ -97,13 +102,23 @@ export function dispose(id) {
     })
 }
 
-const scrollElementToView = element => {
+const scrollElementToView = menu => {
+    const { element } = menu;
     const scroll = element.hasAttribute('data-bb-scroll-view')
     if (scroll) {
-        var links = [...element.querySelectorAll('.nav-link.active')]
-        if (links.length > 0) {
-            var link = links.pop()
-            link.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'start' });
-        }
+        let count = 0;
+        menu.handler = setInterval(() => {
+            if (count < 3) {
+                var links = [...element.querySelectorAll('.nav-link.active')]
+                if (links.length > 0) {
+                    clearInterval(menu.handler);
+                    menu.handler = null;
+
+                    var link = links.pop()
+                    link.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'start' });
+                }
+            }
+            count++;
+        }, 100);
     }
 }