feat(Scroll): add ScrollToBottom method (#5858)

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

* refactor: 精简代码

* doc: 精简代码

* refactor: 移除 init 调用

* test: 增加单元测试

* test: 更新单元测试

---------

Co-authored-by: Argo Zhang <[email protected]>

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 class="bg-primary" style="height: 100px;"></div>
+            <div class="bg-secondary" style="height: 100px;"></div>
+            <div class="bg-warning" style="height: 100px;"></div>
+            <div class="bg-success" style="height: 100px;"></div>
+            <div class="bg-info" style="height: 100px;"></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,9 @@ private AttributeItem[] GetAttributes() =>
             DefaultValue = " — "
         }
     ];
+
+    [NotNull]
+    private Scroll? _scroll = null;
+
+    private Task ScrollToBottom() => _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(AutoInvokeInit = false, 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,9 @@ public partial class Scroll
     [Inject]
     [NotNull]
     private IOptionsMonitor<BootstrapBlazorOptions>? Options { get; set; }
+
+    /// <summary>
+    /// 滚动到底部
+    /// </summary>
+    public Task ScrollToBottom() => InvokeVoidAsync("scrollToBottom", Id);
 }

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

@@ -0,0 +1,9 @@
+export function scrollToBottom(id) {
+    const el = document.getElementById(id);
+    const top = el.scrollHeight;
+    el.scrollTo({
+        top,
+        left: 0,
+        behavior: "smooth"
+    });
+}

test/UnitTest/Components/ScrollTest.cs

@@ -5,7 +5,7 @@
 
 namespace UnitTest.Components;
 
-public class ScrollTest : TestBase
+public class ScrollTest : BootstrapBlazorTestBase
 {
     [Fact]
     public void Height_Ok()
@@ -31,20 +31,20 @@ public void ScrollWidth_Ok()
             builder.Add(a => a.Width, "500px");
         });
 
-        Assert.Equal("<div class=\"scroll\" style=\"width: 500px; --bb-scroll-width: 5px; --bb-scroll-hover-width: 5px;\"></div>", cut.Markup);
+        Assert.Contains("style=\"width: 500px; --bb-scroll-width: 5px; --bb-scroll-hover-width: 5px;\"", cut.Markup);
 
         cut.SetParametersAndRender(builder =>
         {
             builder.Add(a => a.ScrollWidth, 6);
         });
-        Assert.Equal("<div class=\"scroll\" style=\"width: 500px; --bb-scroll-width: 6px; --bb-scroll-hover-width: 5px;\"></div>", cut.Markup);
+        Assert.Contains("style=\"width: 500px; --bb-scroll-width: 6px; --bb-scroll-hover-width: 5px;\"", cut.Markup);
 
         cut.SetParametersAndRender(builder =>
         {
             builder.Add(a => a.ScrollWidth, 6);
             builder.Add(a => a.ScrollHoverWidth, 12);
         });
-        Assert.Equal("<div class=\"scroll\" style=\"width: 500px; --bb-scroll-width: 6px; --bb-scroll-hover-width: 12px;\"></div>", cut.Markup);
+        Assert.Contains("style=\"width: 500px; --bb-scroll-width: 6px; --bb-scroll-hover-width: 12px;\"", cut.Markup);
     }
 
     [Fact]
@@ -59,4 +59,17 @@ public void ChildContent_Ok()
 
         Assert.Contains("I am scroll", cut.Markup);
     }
+
+    [Fact]
+    public async Task ScrollToBottom_Ok()
+    {
+        var cut = Context.RenderComponent<Scroll>(builder => builder.Add(a => a.ChildContent, r =>
+        {
+            r.OpenElement(0, "div");
+            r.AddContent(1, "I am scroll");
+            r.CloseComponent();
+        }));
+
+        await cut.InvokeAsync(() => cut.Instance.ScrollToBottom());
+    }
 }