Merge pull request #2169 from OctopusDeploy/km/search-fixes

Fixed scroll issue
OctopusDeploy · Feb 16, 2024 · bc989ec · bc989ec
2 parents 49f4fe7 + f17d885
commit bc989ec
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 19 deletions.
diff --git a/public/docs/css/main.css b/public/docs/css/main.css
@@ -408,7 +408,8 @@ nav.skip-links a:focus {
   box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
   background-color: var(--header-bg);
   min-height: 82px;
-  position: sticky;
+  position: fixed;
+  width: 100%;
   top: 0;
   /* z-index due to conflict with octo-title-bkg */
   z-index: 11;
@@ -785,6 +786,7 @@ nav.skip-links a:focus {
   justify-content: space-between;
   grid-template-areas:
     "menu content toc";
+  margin-top: 82px;
 }
 
 .content-group header {
@@ -1432,7 +1434,7 @@ a[data-youtube] {
   border-radius: 0.9375rem;
   list-style-type: none;
   overflow-y: scroll;
-  transition-property: padding, transform, visibility;
+  transition-property: opacity, padding, transform, visibility;
   transition-duration: var(--search-dropdown-duration);
   transition-timing-function: ease-in-out;
   visibility: hidden;
@@ -1441,9 +1443,11 @@ a[data-youtube] {
   max-height: var(--search-dropdown-height);
   transform-origin: top;
   will-change: transform;
+  opacity: 0;
 }
 
 .site-search.is-active+.site-search-results {
+  opacity: 1;
   padding: 1rem 0;
   transform: translateY(1.37rem) scaleY(1);
   visibility: visible;

diff --git a/public/docs/css/vars.css b/public/docs/css/vars.css
@@ -171,7 +171,7 @@
     --block-gap: 2rem;
 
     --header-pin: 0;
-    --scroll-pad: 110px;
+    --scroll-pad: 140px;
 
     --box-shadow: 4px 0px 8px rgba(0, 0, 0, 0.25);
     --octo-shadow-standard-box: 0 2px 6px 0 rgba(0,0,0,0.2);

diff --git a/public/docs/js/search.js b/public/docs/js/search.js
@@ -58,7 +58,6 @@ function initializeSearch() {
   const siteSearchElement = qs("[data-site-search]");
   const siteSearchResults = qs("[data-site-search-results");
   const removeSearchButton = qs("[data-site-search-remove]");
-  let scrollYPosition = window.scrollY;
 
   /** @type {SearchEntry[]} */
   var haystack = [];
@@ -122,21 +121,13 @@ function initializeSearch() {
     if (siteSearchWrapper.classList.contains("is-active")) return;
     siteSearchWrapper.classList.add("is-active");
     document.body.style.overflow = "hidden";
-
-    scrollYPosition = window.scrollY;
-
-    // Add event listener to lock scroll position
-    window.addEventListener("scroll", lockScroll, { passive: false });
   }
 
   function deactivateInput() {
     if (!siteSearchWrapper.classList.contains("is-active")) return;
     siteSearchWrapper.classList.remove("is-active");
     siteSearchInput.blur();
     document.body.style.overflow = "";
-
-    // Remove event listener to allow scrolling again
-    window.removeEventListener("scroll", lockScroll, { passive: false });
   }
 
   function openDropdown() {
@@ -156,7 +147,7 @@ function initializeSearch() {
         window.innerHeight - siteSearchElementRect.bottom;
 
       if (offsetFromBottomToElement < dropdownHeight) {
-        window.removeEventListener("scroll", lockScroll, { passive: false });
+        document.body.style.overflow = "";
 
         // Scroll to the siteSearchElement
         siteSearchElement.scrollIntoView({
@@ -166,8 +157,7 @@ function initializeSearch() {
 
         // Delay the overflow to allow for smooth scrolling
         setTimeout(() => {
-          scrollYPosition = window.scrollY;
-          window.addEventListener("scroll", lockScroll, { passive: false });
+          document.body.style.overflow = "hidden";
         }, 300);
       }
     });
@@ -183,10 +173,6 @@ function initializeSearch() {
     siteSearchInput.focus();
   }
 
-  function lockScroll() {
-    window.scrollTo(window.scrollX, scrollYPosition);
-  }
-
   function handleDropdownKeyboardNavigation(e) {
     // Proceed only if search dropdown is active
     if (!siteSearchWrapper.classList.contains("is-active")) return;