2

I found a solution to a similar problem I am having HERE. However I can't get it to work for myself. The problem I encountered was when trying to lock vertical scroll while the mobile menu was opened on a site I am working on. Locking the scroll caused the page to jump to the top each time the menu was opened.

jQuery:

timber.openDrawerMenu = function () {
    var tempScrollTop = $(window).scrollTop();
    var $mobileMenu = $('.nav-bar'),
    $mobileMenuButton = $('#menu-opener'),
    $body = $('body');
    $mobileMenuButton.addClass('opened');
    $mobileMenu.addClass('opened');
    $body.addClass('opened-drawer');

  // Make drawer a11y accessible
  timber.cache.$navBar.attr('aria-hidden', 'false');

  // Set focus on drawer
  timber.trapFocus({
     $container: timber.cache.$navBar,
     namespace: 'drawer_focus'
  });

  // Escape key closes menu
  timber.cache.$html.on('keyup.drawerMenu', function(evt) {
    if (evt.keyCode == 27) {
      timber.closeDrawerMenu();
    }
  });
  console.log(tempScrollTop);
  $(window).scrollTop(tempScrollTop);
}

I added the console.log() statement in order to see if the script was caputuring the proper scrollTop value and in fact it is. For some reason it is not setting the scroll position though and I am not able to figure out why exactly. Any help here is greatly appreciated.

JSON_Derulo
  • 892
  • 2
  • 14
  • 39
  • use a `setTimeout(x,0)` to wait for a dom refresh to give the browser time to scroll before reading. add the class(es), wait a moment, then do your scroll code, which otherwise looks ok at a glance. – dandavis Jul 04 '17 at 20:00
  • @dandavis where would I use that code exactly? But it is measuring correctly it just is not actually setting the scroll position after the click event. – JSON_Derulo Jul 04 '17 at 20:02
  • I can't really understand what you're trying to accomplish with jQuery. – mluke Jul 04 '17 at 20:09
  • @LucasMedina I am trying to calculate and then set the scrollTop position when the menu is expanded. This way it would counteract the issue I am having where the page jumps to the top when the menu is expanded (opened). So I am using `var tempScrollTop = $(window).scrollTop();` to calculate it and `console.log(tempScrollTop); $(window).scrollTop(tempScrollTop);` to set it. However the page is still jumping to the top when opening the menu but showing the correct scrollPosition in the console. – JSON_Derulo Jul 04 '17 at 20:11
  • What css does .opened-drawer set on the body? Does it work properly without it? – K.F Jul 04 '17 at 20:17
  • @K.F `body.opened-drawer { overflow: hidden !important; height: 100% !important; width: 100% !important; position: fixed !important; z-index: 0 !important; }` – JSON_Derulo Jul 04 '17 at 20:18
  • @K.F The menu works properly without it, however the page is scrollable behind the menu which is what I am trying to fix. – JSON_Derulo Jul 04 '17 at 20:18
  • 1
    the position: fixed is a problem, because it will position the body relative to the viewport. Without it, that should (in theory) work since you've set overflow: hidden and programmatically scrolled to the proper location. – K.F Jul 04 '17 at 20:25
  • @K.F it does solve the issue, however the page becomes scrollable again if I remove the `position: fixed` – JSON_Derulo Jul 04 '17 at 20:34
  • And by that you mean that while the menu is open if the user scrolls and closes the menu, the page scroll-y position will be in a different location. Is this something that happens solely on a mobile device? not in an emulator? – K.F Jul 04 '17 at 20:50
  • @K.F yes exactly. And yes when I view on inspect mode on desktop this behaviour is not possible but on my iPhone and several other devices it is. – JSON_Derulo Jul 04 '17 at 20:54

1 Answers1

1

I see that this is a mobile specific problem.

  1. I have 1 thought on that:
    • Try explicitly setting position: relative on the body tag.
  2. If that doesn't work, I have a more hacky thought:
    • Try explicitly resetting the scroll location just before closing the menu.

Hope those work, if not, leave a comment :)

K.F
  • 459
  • 3
  • 12
  • How can I set the scrollTop position using a variable that was defined in another function? – JSON_Derulo Jul 04 '17 at 21:03
  • There are quite a few ways. Off the top of my head.. You can store it on timber or on a menu object. You could also store it in a data variable on the element itself. You could also bind the variable to a callback function. – K.F Jul 04 '17 at 21:08