Improve scroll for taller elements

Author: nilbuild

index.html

@@ -167,6 +167,7 @@ <h2>Highlight Feature</h2>
       <div class="buttons">
         <button id="highlight-btn">Animated Highlight</button>
         <button id="buggy-highlight-btn">Buggy Highlight</button>
+        <button id="off-screen-highlight-btn">Off Screen Highlight</button>
         <button id="simple-highlight-btn">Simple Highlight</button>
         <button id="transition-highlight-btn">Transition Highlight</button>
         <button id="disallow-close">Disallow Close</button>
@@ -923,6 +924,18 @@ <h2>Usage and Demo</h2>
         });
       });
 
+      document.getElementById("off-screen-highlight-btn").addEventListener("click", () => {
+        driver().highlight({
+          element: ".container",
+          popover: {
+            title: "Buggy Highlight",
+            description: "Unlike the older version, new version doesn't work with z-indexes so no more positional issues.",
+            side: "bottom",
+            align: "start",
+          },
+        });
+      });
+
       document.getElementById("highlight-btn").addEventListener("click", () => {
         driver({
           animate: true,

src/utils.ts

@@ -30,12 +30,14 @@ export function bringInView(element: Element) {
 
   const shouldSmoothScroll = getConfig("smoothScroll");
 
+  const isTallerThanViewport = (element as HTMLElement).offsetHeight > window.innerHeight;
+
   element.scrollIntoView({
     // Removing the smooth scrolling for elements which exist inside the scrollable parent
     // This was causing the highlight to not properly render
     behavior: !shouldSmoothScroll || hasScrollableParent(element) ? "auto" : "smooth",
     inline: "center",
-    block: "center",
+    block: isTallerThanViewport ? "start" : "center",
   });
 }