Disable scrolling on click, enable on click

[gjwjr]

Is there an easy way to disable scrolling when fullscreen menu (hamburger icon) is clicked, and then re-enable scrolling once the same icon is clicked again (to close the menu)? Ideally I don't want to destroy it as I want the scrollbar to remain visible.

[sadeghbarati]

#361 (comment)

[gjwjr]

Thanks! Im not entirely sure how to implement that code though, Im using it on a Wordpress site:
`gsap.registerPlugin(ScrollTrigger);

const scrollbar = Scrollbar.init(document.body, { delegateTo: document, alwaysShowTracks: true, speed: 0.7, damping:0.1, });

ScrollTrigger.scrollerProxy(document.body, {
scrollTop(value) {
if (arguments.length) {
scrollbar.scrollTop = value;
}
return scrollbar.scrollTop;
}
});

scrollbar.addListener(ScrollTrigger.update);
ScrollTrigger.defaults({ scroller: document.body });
`

[sadeghbarati]

Do you use a tool inside your WordPress project to bundle your javascript code?

You may have to read babel, babel/cli documentation

minimal example of package.json

{
  "scripts": {
    "build": "babel src --out-dir .",
    "watch": "babel -w src --out-dir ."
  },
  "devDependencies": {
    "@babel/cli": "^7.6.0",
    "@babel/core": "^7.6.0",
  }
}

if you already install npm you can use script below inside your terminal based on project structure

npx babel  src --out-dir .

[gjwjr]

I have almost fixed my issue using the following code.

I have an open menu button and a close menu button, the only problem now is the second time the open menu button (#menu-toggle-open) is clicked, it destroys everything making the website just a white page. Do you know if there is a fix for this based on my code?

jQuery(document).ready(function($){
$('#menu-toggle-open').click(function () {
      scrollbar.destroy()
    })

$('#menu-toggle-close').click(function () {
      Scrollbar.init(document.body)
    })

});

[sadeghbarati]

that's not proper way to solve this problem,

please share GitHub repo of your project

[gjwjr]

Ok Im a bit lost at this point, trying to fix a few different issues at once...

Ive created a codepen for you so you can see the setup. Fullscreen menu and smooth-scrollbar, trying to disable smooth-scrollbar when the menu is open and enable when its closed.