How to remove background scrolling below responsive menu

Question

I am working on one simple responsive menu. Everything is working fine except that when menu is bigger and you scroll to the bottom of it, it will continue scrolling everything below it which is page it self. Is it possible to remove that.

You can test it on this link.

If you open with your phone, the menu will scroll to the bottom, then after that it will continue scolling background which is body, so i am trying to stop that.

Thanks

I have that issue sometimes with fixed menus, my solution was to hide the content of the body in the same function as the showing of the menu. In your case just hiding the section tag would do it. — pathfinder, Nov 20 '14 at 12:41
I did that on my previous template, but its somehow superslow for mobile, not sure why, so i am looking for better solution this time. Here is how i did it previously: (http://www.logicathemes.com/iva/index-dark.html) — Goran Jakovljevic, Nov 20 '14 at 12:46
In style.css line No. 606 Remove this #main-menu.dole { position: fixed; } — Lakhan, Nov 20 '14 at 12:52
That doesnt make sense, I need menu to stay at the top. But thanks anyway. — Goran Jakovljevic, Nov 20 '14 at 13:01
strange, it works really fast for me even going back to Android Frodo — pathfinder, Nov 20 '14 at 14:49

score 1 · Answer 1 · answered Nov 21 '14 at 09:39

make class disableScroll in css .disableScroll{ overflow:hidden }

when user click on '#menu-toggle-wrapper' add class 'disableScroll' to body element, this would disable background scroll, then remove 'disableScroll' class from body element when user click on navigation link or '#menu-toggle-wrapper' to enable scroll on page

score 0 · Answer 2 · answered Nov 20 '14 at 14:16

0

you should check this plugin.

https://github.com/jquery/jquery-mousewheel

It prevents mousewheel events under targeted elements.

$(function() {

   $("#element").mousewheel(function(event, delta) {
      event.preventDefault();
   });

});

answered Nov 20 '14 at 14:16

Iggy

93
1
5

score 0 · Answer 3 · edited May 23 '17 at 12:06

You should prevent body or html scroll with javascript. Check this -> copied from this link

 // lock scroll position, but retain settings for later
  var scrollPosition = [
    self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
    self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
  ];
  var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
  html.data('scroll-position', scrollPosition);
  html.data('previous-overflow', html.css('overflow'));
  html.css('overflow', 'hidden');
  window.scrollTo(scrollPosition[0], scrollPosition[1]);


  // un-lock scroll position
  var html = jQuery('html');
  var scrollPosition = html.data('scroll-position');
  html.css('overflow', html.data('previous-overflow'));
  window.scrollTo(scrollPosition[0], scrollPosition[1])

How to remove background scrolling below responsive menu

3 Answers3