diff --git a/src/BootstrapBlazor.Server/Components/Samples/IntersectionObservers.razor b/src/BootstrapBlazor.Server/Components/Samples/IntersectionObservers.razor
index ae4fc22ece8..dec03c7eca9 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/IntersectionObservers.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/IntersectionObservers.razor
@@ -92,7 +92,8 @@
         <p>@((MarkupString)Localizer["IntersectionObserverThresholdDesc"].Value)</p>
         <div class="text-center">@_thresholdValueString</div>
     </section>
-    <IntersectionObserver OnIntersecting="OnThresholdChanged" Threshold="0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1" AutoUnobserveWhenIntersection="false">
+    <IntersectionObserver OnIntersecting="OnThresholdChanged" Threshold="0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1"
+                          AutoUnobserveWhenIntersection="false">
         <div class="bb-list-load scroll" style="height: 200px;">
             <div class="d-flex" style="height: 600px; justify-content: center; align-items: center;">
                 <IntersectionObserverItem>
@@ -118,8 +119,7 @@
                 </div>
             }
         </div>
-        <LoadMore OnLoadMoreAsync="OnLoadMoreItemAsync" CanLoading="_canLoading">
-        </LoadMore>
+        <LoadMore OnLoadMoreAsync="OnLoadMoreItemAsync" CanLoading="_canLoading"></LoadMore>
     </div>
 </DemoBlock>
 
diff --git a/src/BootstrapBlazor/Components/IntersectionObserver/IntersectionObserver.razor.cs b/src/BootstrapBlazor/Components/IntersectionObserver/IntersectionObserver.razor.cs
index 11691d48843..2302c3ec051 100644
--- a/src/BootstrapBlazor/Components/IntersectionObserver/IntersectionObserver.razor.cs
+++ b/src/BootstrapBlazor/Components/IntersectionObserver/IntersectionObserver.razor.cs
@@ -11,11 +11,11 @@ namespace BootstrapBlazor.Components;
 public partial class IntersectionObserver
 {
     /// <summary>
-    /// 获得/设置 是否使用元素视口作为根元素 默认为 false 使用浏览器视口作为根元素
-    /// <para>The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if value is false. Default value is false</para>
+    /// 获得/设置 是否使用元素视口作为根元素 默认为 true 使用当前元素作为根元素
+    /// <para>The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if value is false. Default value is true</para>
     /// </summary>
     [Parameter]
-    public bool UseElementViewport { get; set; }
+    public bool UseElementViewport { get; set; } = true;
 
     /// <summary>
     /// Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. Defaults to all zeros.
diff --git a/src/BootstrapBlazor/Components/IntersectionObserver/LoadMore.razor b/src/BootstrapBlazor/Components/IntersectionObserver/LoadMore.razor
index 13a44835e20..c8ac258d29c 100644
--- a/src/BootstrapBlazor/Components/IntersectionObserver/LoadMore.razor
+++ b/src/BootstrapBlazor/Components/IntersectionObserver/LoadMore.razor
@@ -1,7 +1,8 @@
 @namespace BootstrapBlazor.Components
 @inherits BootstrapModuleComponentBase
 
-<IntersectionObserver OnIntersecting="OnIntersecting" Threshold="@Threshold" AutoUnobserveWhenIntersection="false">
+<IntersectionObserver OnIntersecting="OnIntersecting" Threshold="@Threshold" AutoUnobserveWhenIntersection="false"
+                      UseElementViewport="false">
     <IntersectionObserverItem>
         <div class="bb-intersection-loading">
             @if (CanLoading)