refactor(ScrollIntoView): use nearest value instead of center (#5049)

* fix: 更新滚动脚本

* doc: 更新 TableSection 示例滚动逻辑

* doc: 更新文档

* chore: bump version 9.2.5-beta02

* revert: 撤销代码

* doc: 更新注释

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Table/TablesSelection.razor.js

@@ -1,12 +1,9 @@
 export function scroll(id) {
     const element = document.getElementById(id);
     if (element) {
-        const selectedRow = element.querySelector('.form-check.is-checked');
+        const selectedRow = element.querySelector('tr.active');
         if (selectedRow) {
-            const row = selectedRow.closest('tr');
-            if (row) {
-                row.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
+            selectedRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
         }
     }
 }

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.2.5-beta01</Version>
+    <Version>9.2.5-beta02</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js

@@ -127,26 +127,12 @@ const handlerKeyup = (ac, e) => {
         else if (index > items.length - 1) {
             index = 0;
         }
-        items[index].classList.add('active');
-        const top = getTop(menu, index);
-        const hehavior = el.getAttribute('data-bb-scroll-behavior') ?? 'smooth';
-        menu.scrollTo({ top: top, left: 0, behavior: hehavior });
+        current = items[index];
+        current.classList.add('active');
+        scrollIntoView(el, current);
     }
 }
 
-const getTop = (menu, index) => {
-    const styles = getComputedStyle(menu)
-    const maxHeight = parseInt(styles.maxHeight) / 2
-    const itemHeight = getHeight(menu.querySelector('.dropdown-item'))
-    const height = itemHeight * index
-    const count = Math.floor(maxHeight / itemHeight);
-    let top = 0;
-    if (height > maxHeight) {
-        top = itemHeight * (index > count ? index - count : index)
-    }
-    return top;
-}
-
 export function showList(id) {
     const ac = Data.get(id)
     if (ac) {
@@ -177,4 +163,9 @@ export function dispose(id) {
     }
 }
 
+const scrollIntoView = (el, item) => {
+    const behavior = el.getAttribute('data-bb-scroll-behavior') ?? 'smooth';
+    item.scrollIntoView({ behavior: behavior, block: "nearest", inline: "start" });
+}
+
 export { handleKeyUp, select, selectAllByFocus, selectAllByEnter }

src/BootstrapBlazor/Components/Select/Select.razor.js

@@ -141,5 +141,5 @@ function indexOf(el, element) {
 
 const scrollIntoView = (el, item) => {
     const behavior = el.getAttribute('data-bb-scroll-behavior') ?? 'smooth';
-    item.scrollIntoView({ behavior: behavior, block: "center", inline: "nearest" });
+    item.scrollIntoView({ behavior: behavior, block: "nearest", inline: "start" });
 }

src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs

@@ -258,7 +258,7 @@ public partial class TreeView<TItem> : IModelEqualityComparer<TItem>
     public bool EnableKeyboard { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否键盘上下键操作当前选中节点与视窗关系配置 默认 null 使用 { behavior: "smooth", block: "center", inline: "nearest" }
+    /// 获得/设置 是否键盘上下键操作当前选中节点与视窗关系配置 默认 null 使用 { behavior: "smooth", block: "nearest", inline: "start" }
     /// </summary>
     [Parameter]
     public ScrollIntoViewOptions? ScrollIntoViewOptions { get; set; }

src/BootstrapBlazor/Components/TreeView/TreeView.razor.js

@@ -32,7 +32,7 @@ export function scroll(id, options) {
     const el = document.getElementById(id);
     const item = el.querySelector(".tree-content.active");
     if (item) {
-        item.scrollIntoView(options ?? { behavior: 'smooth', block: 'start', inline: 'nearest' });
+        item.scrollIntoView(options ?? { behavior: 'smooth', block: 'nearest', inline: 'start' });
     }
 }