scrollable side menu, automatic scrolling menu with content

trexima · Oct 19, 2021 · 87f799f · 87f799f
1 parent 1fdaedc
commit 87f799f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/idsk/components/in-page-navigation/_in-page-navigation.scss b/src/idsk/components/in-page-navigation/_in-page-navigation.scss
@@ -32,6 +32,8 @@
         position: sticky;
         top: 0;
         width: govuk-grid-width(one-quarter);
+        overflow: auto;
+        height: 100vh;
       }
     }
   }

diff --git a/src/idsk/components/in-page-navigation/in-page-navigation.js b/src/idsk/components/in-page-navigation/in-page-navigation.js
@@ -64,7 +64,7 @@ InPageNavigation.prototype.handleClickLink = function (e) {
 
 /**
  * An event handler for click event on $linkPanel - collapse or expand in page navigation menu
- * @param {object} e 
+ * @param {object} e
  */
 InPageNavigation.prototype.handleClickLinkPanel = function (e) {
     var $module = this.$module
@@ -77,7 +77,7 @@ InPageNavigation.prototype.handleClickLinkPanel = function (e) {
 
 /**
  * close navigation if the user click outside navigation
- * @param {object} e 
+ * @param {object} e
  */
 InPageNavigation.prototype.checkCloseClick = function (e) {
     var $el = e.target || e.srcElement
@@ -97,6 +97,7 @@ InPageNavigation.prototype.checkCloseClick = function (e) {
  * When the user scrolls down from the top of the document, set position to fixed
  */
 InPageNavigation.prototype.scrollFunction = function () {
+    console.log("scrolling")
     var $module = this.$module
     var $arrTitlesAndElems = this.$arrTitlesAndElems
     var $parentModule = $module.parentElement
@@ -137,6 +138,12 @@ InPageNavigation.prototype.changeCurrentLink = function (el) {
     })
     $currItem.classList.add('idsk-in-page-navigation__list-item--active')
     $linkPanelText.innerText = $articleTitle.innerText
+
+    // let active item be always visible
+    $currItem.scrollIntoView({
+      block: "nearest",
+      inline: "nearest"
+    });
 }
 
 export default InPageNavigation