[cssom-view-1] Add scrollIntoView example demonstrating usage of container attribute. (#12450)

Author: flackr

cssom-view-1/Overview.bs

@@ -1309,6 +1309,42 @@ The <dfn method for=Element caniuse=scrollintoview>scrollIntoView(<var>arg</var>
     with <var>behavior</var>, <var>block</var>, <var>inline</var>, and <var>container</var>.
 1. Optionally perform some other action that brings the element to the user's attention.
 
+<div class='example'>
+    A component can use scrollIntoView to scroll content of interest into the specified alignment:
+
+    <pre><code highlight="html">
+    &lt;style&gt;
+        .scroller { overflow: auto; scroll-padding: 8px; }
+        .slide { scroll-margin: 16px; scroll-snap-align: center; }
+    &lt;/style&gt;
+    &lt;div class="carousel"&gt;
+        &lt;div class="slides scroller"&gt;
+            &lt;div id="s1" class="slide"&gt;
+            &lt;div id="s2" class="slide"&gt;
+            &lt;div id="s3" class="slide"&gt;
+        &lt;/div&gt;
+        &lt;div class="markers"&gt;
+            &lt;button data-target="s1"&gt;1&lt;/button&gt;
+            &lt;button data-target="s2"&gt;2&lt;/button&gt;
+            &lt;button data-target="s3"&gt;3&lt;/button&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+    &lt;script&gt;
+        document.querySelector('.markers').addEventListener('click', (evt) => {
+            const target = document.getElementById(evt.target.dataset.target);
+            if (!target) return;
+            // scrollIntoView correctly aligns target item respecting scroll-snap-align,
+            // scroll-margin, and the scroll container's scroll-padding.
+            target.scrollIntoView({
+                // Only scroll the nearest scroll container.
+                container: 'nearest',
+                behavior: 'smooth'
+            });
+        });
+    &lt;/script&gt;
+    </code></pre>
+</div>
+
 The <dfn method for=Element lt="scroll(options)|scroll(x, y)">scroll()</dfn> method must run these steps:
 
 1. If invoked with one argument, follow these substeps: