CODEWITHSUNDEEP
jqueryhtmlcssresponsive-design
Goran Jakovljevic
Goran Jakovljevic

Reputation: 2820

How to remove background scrolling below responsive menu

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

Upvotes: 1

Views: 2063

Answers (3)

lukkasz
lukkasz

Reputation: 133

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

Upvotes: 1

Tomislav
Tomislav

Reputation: 752

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])

Upvotes: 0

Iggy
Iggy

Reputation: 93

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();
   });

});

Upvotes: 0

Related Questions