Merge branch 'doc-ob' into nhren

Author: ArgoZhang

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

@@ -2,6 +2,20 @@
 @inject IStringLocalizer<IntersectionObservers> Localizer
 @inject IOptionsMonitor<WebsiteOptions> WebsiteOption
 
+<HeadContent>
+    <style>
+        .bb-video video {
+            width: 256px;
+        }
+
+        @@media (min-width: 767.99px) {
+            .bb-video video {
+                width: 350px;
+            }
+        }
+    </style>
+</HeadContent>
+
 <h3>@Localizer["IntersectionObserverTitle"]</h3>
 
 <h4>@Localizer["IntersectionObserverDescription"]</h4>
@@ -56,23 +70,10 @@
 <DemoBlock Title="@Localizer["IntersectionObserverVisibleTitle"]"
            Introduction="@Localizer["IntersectionObserverVisibleIntro"]"
            Name="Visible">
-    <HeadContent>
-        <style>
-            .bb-video video {
-                width: 256px;
-            }
-
-            @@media (min-width: 767.99px) {
-                .bb-video video {
-                    width: 350px;
-                }
-            }
-        </style>
-    </HeadContent>
     <section ignore>
         <p>@((MarkupString)Localizer["IntersectionObserverVisibleDesc"].Value)</p>
+        <div class="text-center @_textColorString">@_videoStateString</div>
     </section>
-    <p class="text-center @_textColorString">@_videoStateString</p>
     <IntersectionObserver OnIntersecting="OnVisibleChanged" Threshold="1" AutoUnobserveWhenIntersection="false">
         <div class="bb-video-demo scroll">
             <div class="bb-video">
@@ -87,8 +88,10 @@
 <DemoBlock Title="@Localizer["IntersectionObserverThresholdTitle"]"
            Introduction="@Localizer["IntersectionObserverThresholdIntro"]"
            Name="Threshold">
-    <section ignore><p>@((MarkupString)Localizer["IntersectionObserverThresholdDesc"].Value)</p></section>
-    <p class="text-center">@_thresholdValueString</p>
+    <section ignore>
+        <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">
         <div class="bb-list-load scroll" style="height: 200px;">
             <div class="d-flex" style="height: 600px; justify-content: center; align-items: center;">

src/BootstrapBlazor/Components/IntersectionObserver/IntersectionObserver.razor.cs

@@ -3,7 +3,6 @@
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
 
-
 namespace BootstrapBlazor.Components;
 
 /// <summary>
@@ -12,7 +11,7 @@ namespace BootstrapBlazor.Components;
 public partial class IntersectionObserver
 {
     /// <summary>
-    /// 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 not specified or if null
+    /// 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
     /// </summary>
     [Parameter]
     public bool UseElementViewport { get; set; }

src/BootstrapBlazor/Components/IntersectionObserver/IntersectionObserver.razor.js

@@ -8,7 +8,7 @@ export function init(id, invoke, options) {
 
     const items = [...el.querySelectorAll(".bb-intersection-observer-item")];
 
-    if (options.useElementViewport === false) {
+    if (options.useElementViewport === true) {
         options.root = el;
     }
     if (options.threshold && options.threshold.indexOf(' ') > 0) {