feat(Scroll): 添加平滑滚动到底部的功能，用于聊天框和动态条目展示等

Author: syminomega

src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor

@@ -9,10 +9,19 @@
 
 <DemoBlock Title="@Localizer["ScrollNormalTitle"]" Introduction="@Localizer["ScrollNormalIntro"]" Name="Normal">
     <div class="scroll-demo border">
-        <Scroll Height="200px">
-            <div style="height: 400px;">@Localizer["ScrollNormalDescription"]</div>
-            <div>@Localizer["ScrollNormalBottom"]</div>
+        <Scroll @ref="_scroll" Height="200px">
+            <div class="m-1">@Localizer["ScrollNormalDescription"]</div>
+            <div style="height: 100px; max-width: 200px; background-color: var(--bs-primary)"></div>
+            <div style="height: 100px; max-width: 200px; background-color: var(--bs-secondary)"></div>
+            <div style="height: 100px; max-width: 200px; background-color: var(--bs-warning)"></div>
+            <div style="height: 100px; max-width: 200px; background-color: var(--bs-success)"></div>
+            <div style="height: 100px; max-width: 200px; background-color: var(--bs-info)"></div>
+            <div class="m-1">@Localizer["ScrollNormalBottom"]</div>
         </Scroll>
+        <Divider/>
+        <div class="m-3">
+            <Button OnClick="ScrollToBottom" Text="@Localizer["ScrollToBottom"]"></Button>
+        </div>
     </div>
 </DemoBlock>
 

src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor.cs

@@ -33,4 +33,15 @@ private AttributeItem[] GetAttributes() =>
             DefaultValue = " — "
         }
     ];
+
+    private Scroll? _scroll;
+
+    private async Task ScrollToBottom()
+    {
+        if (_scroll != null)
+        {
+            await _scroll.ScrollToBottom();
+        }
+
+    }
 }

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -1335,8 +1335,9 @@
     "ScrollTitle": "Scroll",
     "ScrollDescription": "Add scroll bars to components whose height or width exceeds the standard",
     "ScrollTips": "The scroll bar can be rendered only when its element has a fixed height. Its <code>height</code> attribute can be set through the coat element",
+    "ScrollToBottom": "Scroll to bottom",
     "ScrollNormalTitle": "Common usage",
-    "ScrollNormalIntro": "Add a scroll bar to the component. By setting the height of <code>Height</code> to 200px, the scroll bar appears when the height of the inner child element is 400px",
+    "ScrollNormalIntro": "Add a scroll bar to the component. By setting the height of <code>Height</code> to 200px, the scroll bar appears when the height of the inner child element is 500px",
     "Desc1": "Subassembly",
     "Desc2": "Component height",
     "ScrollNormalDescription": "Please scroll the scroll bar on the right",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -1335,8 +1335,9 @@
     "ScrollTitle": "Scroll 滚动条",
     "ScrollDescription": "给高度或者宽度超标的组件增加滚动条",
     "ScrollTips": "其元素必须拥有固定高度时才可呈现滚动条，可以通过外套元素设置其 <code>height</code> 属性",
+    "ScrollToBottom": "滚动到底部",
     "ScrollNormalTitle": "普通用法",
-    "ScrollNormalIntro": "给组件增加滚动条，通过设置 <code>Height</code> 高度值为 200px 使内部子元素高度为 400px 时出现滚动条",
+    "ScrollNormalIntro": "给组件增加滚动条，通过设置 <code>Height</code> 高度值为 200px 使内部子元素高度为 500px 时出现滚动条",
     "Desc1": "子组件",
     "Desc2": "组件高度",
     "ScrollNormalDescription": "请滚动右侧滚动条",

src/BootstrapBlazor/Components/Scroll/Scroll.razor

@@ -1,6 +1,7 @@
 @namespace BootstrapBlazor.Components
-@inherits BootstrapComponentBase
+@inherits BootstrapModuleComponentBase
+@attribute [BootstrapModuleAutoLoader(AutoInvokeDispose = false)]
 
-<div @attributes="AdditionalAttributes" class="@ClassString" style="@StyleString">
+<div @attributes="AdditionalAttributes" id="@Id" class="@ClassString" style="@StyleString">
     @ChildContent
 </div>

src/BootstrapBlazor/Components/Scroll/Scroll.razor.cs

@@ -59,4 +59,12 @@ public partial class Scroll
     [Inject]
     [NotNull]
     private IOptionsMonitor<BootstrapBlazorOptions>? Options { get; set; }
+
+    /// <summary>
+    /// 滚动到底部
+    /// </summary>
+    public async Task ScrollToBottom()
+    {
+        await InvokeVoidAsync("scrollToBottom", Id);
+    }
 }

src/BootstrapBlazor/Components/Scroll/Scroll.razor.js

@@ -0,0 +1,27 @@
+export function scrollToBottom(id) {
+    let el = document.getElementById(id);
+    const start = el.scrollTop;
+    const end = el.scrollHeight;
+    const distance = end - start;
+    const duration = 500; // 动画持续时间（毫秒）
+    const startTime = performance.now();
+
+    function scrollStep(currentTime) {
+        const elapsed = currentTime - startTime;
+        const progress = Math.min(elapsed / duration, 1); // 确保进度不超过1
+        el.scrollTop = start + distance * progress;
+
+        if (progress < 1) {
+            window.requestAnimationFrame(scrollStep);
+        }
+    }
+
+    window.requestAnimationFrame(scrollStep);
+}
+
+export function init(id) {
+    const el = document.getElementById(id)
+    if (el === null) {
+
+    }
+}