How to temporarily stop the scroll (Modal case)

[HectorLS]

"smooth-scrollbar": "^8.2.4"

Again, awesome scroll 👍

Hi, maybe is a silly question, but i didn't find a method to block the scroll on the page ( without destroy it )

like for example if

i have opened a modal box, and i want to temporarily disable the scroll on the page 💻

Thanks in advance

[idiotWu]

You can use plugin system to do this:

import Scrollbar, { ScrollbarPlugin } from 'smooth-scrollbar';

class ModalPlugin extends ScrollbarPlugin {
  static pluginName = 'modal';

  static defaultOptions = {
    open: false,
  };

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

Scrollbar.use(ModalPlugin, /* OverscrollPlugin */);

// usage
const scrollbar = Scrollbar.init(elem);

onModalOpen  -> scrollbar.updatePluginOptions('modal', { open: true });
onModalClose -> scrollbar.updatePluginOptions('modal', { open: false });

[HectorLS]

Brilliant, way better than my approach ! 🎉
Thank you

[vibesudi]

It's so cool, Thanks.

[drcat911]

thank you

[sadeghbarati]

@idiotWu hi
its block scroll
but when u hover the corner trackbar become visible and can drag it to scroll

how remove it while modal is open and how to reEnable it when modal is close

[robizzt]

I have same problem, where I use dropdown as modal on desktop resolutions.

I noticed if you create modal outside of main smooth scroll wrapper and initalize modal smooth scroll, you wont be able to scroll main scroll as long as mouse is over modal. So, if you have modal over whole screen (or modal backdrop), everything should work as expected, without disabling or destroying any smooth scrollbar.

So, I think best partice would be, if you have more than one smooth scrollbar wrappers, you should place each outside of it.
If you have one inside of other, after inner is scrolled to end, outter will start to scroll.

[sadeghbarati]

@robizzt
yeah you right I check Cuberto website which uses Smoothscroll

fixed menu outside of main wrapper of smoothscrollbar when its was fixed, smoothscroll work pretty well and you can hide and show scrollbar track yAxis with z-index

but when you have static menu outside of wrapper of smoothscroll it gets messy and feels like it's fixed and buggy on scroll and you can drag trackbar and two scrollbar appears one native one smoothscroll

I test everything coz I needed to header and menu outside of wrapper and at last I find no solution for it
and move my menu inside of wrapper to work

this.scrollbar.track.yAxis.element.style.display = "none"

[robizzt]

I decided to go with .destroy() because I have dropdown that behaves like a modal. When I open dropdown, I destroy main smoothscroll, when I close dropdown, I initialize main smoothscroll again. I don't know if that's bad practice, cause it is a little complicated, but it works for me.

[toxifiedmatrix]

You can use plugin system to do this:

import Scrollbar, { ScrollbarPlugin } from 'smooth-scrollbar';

class ModalPlugin extends ScrollbarPlugin {
  static pluginName = 'modal';

  static defaultOptions = {
    open: false,
  };

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

Scrollbar.use(ModalPlugin, /* OverscrollPlugin */);

// usage
const scrollbar = Scrollbar.init(elem);

onModalOpen  -> scrollbar.updatePluginOptions('modal', { open: true });
onModalClose -> scrollbar.updatePluginOptions('modal', { open: false });

How can I implement the same in JQuery, please help me.

[PavelZhuravlev]

@idiotWu , Thank you for amazing library!
I'm facing small issue with "Temporarily stop plugin" and can you please help me understand
Is it possible to temporary stop scrolling in some specific point?

For example:
I have scroll event listener and im trying to temporary block scrolling when offset become 500px from top.
But when i am trying to use plugin from this topic, time to time i'm facing overscrolls. Scrolling can stops after 550px, 600px, 700px, because of some overscrolling (remainMomentum) + addListener throttles stream of offsets depend on power of scroll. And all i need is stop scrolling in particular offset - 500px from top, without overscrolling.

Do I miss something, or should i use another workaround for my task?

Thank you for reply!

[pixel-0ne]

import Scrollbar, { ScrollbarPlugin } from 'smooth-scrollbar';

class ModalPlugin extends ScrollbarPlugin {
  static pluginName = 'modal';

  static defaultOptions = {
    open: false,
  };

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

Scrollbar.use(ModalPlugin, /* OverscrollPlugin */);

// usage
const scrollbar = Scrollbar.init(elem);

onModalOpen  -> scrollbar.updatePluginOptions('modal', { open: true });
onModalClose -> scrollbar.updatePluginOptions('modal', { open: false });

How can I implement the same in JQuery, please help me.

+1, it's also interesting to see a solution in JQuery.