Regarding Background Scroll Lock

[toxifiedmatrix]

Hey,

I wanted to lock the background scroll on the position where the scroll is when the overlay menu or navigation menu is opened. And as soon as the navigation menu or overlay is closed, the scroll should be unlocked without changing the scroll position. Please help me implementing it if you can throw some light on this issue, it will be really helpful.

Thanks already!

[toxifiedmatrix]

Please can anyone help, I need it urgently. It will be really appreciated.

[nazarenooviedo]

Hey @toxifiedmatrix, I hope you find it useful to reach a solution! basically, I did a custom plugin to "fix" the scroll position, and then I used this plugin to initialize it (Scrollbar.use(StopScrollPlugin)), and finally, I just use a single if to update the plugin option (scrollBar.updatePluginOptions("modal", { scroll: false }))

stopPlugin.js

import { ScrollbarPlugin } from "smooth-scrollbar"

export default class StopScrollPlugin extends ScrollbarPlugin {
  static pluginName = "stopScroll"

  static defaultOptions = {
    scroll: true
  }

  transformDelta(delta) {
    return !this.options.scroll ? { x: 0, y: 0 } : delta
  }
}

index.js

Scrollbar.use(StopScrollPlugin);

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

modal.js

if(open) {
    scrollBar.updatePluginOptions("stopScroll", { scroll: false })
}
else {
    scrollBar.updatePluginOptions("stopScroll", { scroll: true })
}

[dngraphisme]

Hello @nazarenooviedo , thanks for this answer but how can we do with jQuery please ?

I try everything I need but cannot know where your stopPlugin.js file is located

Thank you in advance for your return, Nicolas :)

[toxifiedmatrix]

Hey @nazarenooviedo thank you for reverting regarding the same issue, ill try implementing as per you solution, thanks alot :)

[toxifiedmatrix]

@nazarenooviedo Hey mate,
Got it to initialize it but still unable to execute it, how to set the condition, if the navigation is open execute the following plugin, something like that?

[rossnorthrup]

I am trying to implement a similar feature with my mobile nav menu.
I am using a simple show/hide with some gsap functionality. once the mobile menu is open, scrolling on the body takes precedence over scrolling for the menu. I would like the body of the page to remain still while my nav menu is open.

Was anyone able to achieve this?
I'm using simple vanilla js.
I tried $('#inner-scrollbar').disableScroll() and Scrollbar.disableScroll($('#inner-scrollbar'))
not sure how to use these functions without seeing examples.

[toxifiedmatrix]

@nazarenooviedo It works great! Thanks for the plugin. :)

[toxifiedmatrix]

@rossnorthrup Mate, if you still stuck on here, let me know, as I managed to make it work.