how can I enable and disable scroll by clicking the same element with jquery?

Question

I would like to disable the scroll when the 'Menu icon' of my page is clicked, and then enable the scroll again when the menu is clicked again to close.

I'm trying something like this:

$(document).ready(function(){

  $(".menu").click(function (e) {
    $(".menucontent").show();
    if ( $(".menucontent").is(":visible")) {
      $('html, body').css({ overflow: 'hidden', height: '100%'});
    }else{
      $('html, body').css({ overflow: 'auto', height: 'auto'});      
    }

  });
  });

but I need some help because I'm kind of newbie on this language

it actually disable the scrolll when menu's content is visible, but it doesn't work when I click again the menu button, the scroll would be enable again, but it doesn't result — Dolarpami Pami
– Dolarpami Pami, Commented May 14, 2017 at 20:53
What you've provided works as expected codepen.io/anon/pen/gWKrYd if it isn't doing what you want, try describing your end goal another way. — Michael Coker
– Michael Coker, Commented May 14, 2017 at 20:56
maybe I'm not explaining myself well... What I want to do is that after doing anything, the scroll of the page works as usual, but when I click on the menu button, the menu's content is showed and the scroll gets desabled, so I can't move anything untill I close the menu and then the content is hided, and the scroll goes back to the initial status, wich means enable again. — Dolarpami Pami
– Dolarpami Pami, Commented May 14, 2017 at 21:06

alessandrio · Accepted Answer · 2017-05-14 21:06:44Z

1

you should put toggle() instead of show

toggle: Display or hide the matched elements.

$(document).ready(function(){
  $(".menu").click(function (e) {
    $(".menucontent").toggle();
      if ( $(".menucontent").is(":visible")) {
        $('html, body').css({ overflow: 'hidden', height: '100%'});
      }else{
        $('html, body').css({ overflow: 'auto', height: 'auto'});      
      }
    });
  });

answered May 14, 2017 at 21:06

alessandrio

4,3802 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dolarpami Pami Over a year ago

you guys don't get it yet u.u . The poblem is not about how I show or not the content, the problem is the scroll... I want the scroll of the page to be enable before showing the content and disable while is visible.

Collectives™ on Stack Overflow

how can I enable and disable scroll by clicking the same element with jquery?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related