fix: scrollTo / scrollTop issue

dnbexperience · Apr 14, 2019 · 3669229 · 3669229
1 parent 09dadb4
commit 3669229
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 5 deletions.
diff --git a/packages/dnb-design-system-portal/src/shared/menu/MainMenuContext.js b/packages/dnb-design-system-portal/src/shared/menu/MainMenuContext.js
@@ -52,9 +52,11 @@ export class MainMenuProvider extends PureComponent {
         // scroll to top on opening the menu, and back again
         if (typeof window !== 'undefined') {
           try {
+            const top =
+              !isOpen && lastScrollPosition > 0 ? lastScrollPosition : 0
+            window.scrollTop = top
             window.scrollTo({
-              top:
-                !isOpen && lastScrollPosition > 0 ? lastScrollPosition : 0,
+              top,
               behavior: 'smooth'
             })
           } catch (e) {

diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenu.js
@@ -226,6 +226,7 @@ const Navigation = styled.nav`
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
+  -ms-overflow-style: none;
 
   /* make the sidemenu accsible for screenreaders on mobile devices  */
   @media (max-width: 50em) {
@@ -378,6 +379,7 @@ export default class SidebarLayout extends PureComponent {
           .querySelector('li.is-active')
           .getBoundingClientRect().top
         const top = this._scrollRef.current.scrollTop + pos - offset
+        window.scrollTop = top
         window.scrollTo({
           top,
           behavior: 'smooth'

diff --git a/packages/dnb-design-system-portal/src/shared/menu/SidebarMenuContext.js b/packages/dnb-design-system-portal/src/shared/menu/SidebarMenuContext.js
@@ -48,8 +48,10 @@ export class SidebarMenuProvider extends PureComponent {
         setTimeout(() => {
           try {
             if (!isOpen && typeof window !== 'undefined') {
+              const top = this.lastScrollPosition
+              window.scrollTop = top
               window.scrollTo({
-                top: this.lastScrollPosition,
+                top,
                 behavior: 'smooth'
               })
             }

diff --git a/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js b/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js
@@ -295,8 +295,10 @@ export default class Dropdown extends Component {
           )
           const top = liElement.offsetTop
           if (scrollTo) {
+            liElement.parentNode.scrollTop = top
             liElement.parentNode.scrollTo({
-              top
+              top,
+              behavior: 'smooth'
             })
           } else {
             liElement.parentNode.scrollTop = top

diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -691,7 +691,8 @@ exports[`Dropdown scss have to match snapshot 1`] = `
     max-height: 50vh;
     overflow-y: scroll;
     overscroll-behavior: contain;
-    scroll-behavior: smooth; }
+    scroll-behavior: smooth;
+    -ms-overflow-style: none; }
   .dnb-dropdown__option {
     position: relative;
     cursor: pointer;

diff --git a/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss b/packages/dnb-ui-lib/src/components/dropdown/style/_dropdown.scss
@@ -147,6 +147,7 @@
     overflow-y: scroll;
     overscroll-behavior: contain;
     scroll-behavior: smooth;
+    -ms-overflow-style: none;
   }
 
   // li element

diff --git a/packages/dnb-ui-lib/src/shared/helpers.js b/packages/dnb-ui-lib/src/shared/helpers.js
@@ -63,6 +63,7 @@ export const scrollToLocationHashId = ({ offset = 0 } = {}) => {
     if (elem instanceof HTMLElement) {
       const top = parseFloat(elem.offsetTop) - offset
       try {
+        window.scrollTop = top
         window.scrollTo({
           top,
           behavior: 'smooth'