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

[Minozzzi]

Thanks!! I will try to work in the two ways mentioned

[Minozzzi]

Hey bro, in my case I create the plugin, but I need access to refs and react states in which my component will have the deltaY logic. Is there a way to do this?

[idiotWu]

In that case, you can pass the handleContainerScroll() callback as an option for your plugin. For example:

class NhShapeAnimationPlugin extends ScrollbarPlugin {
  static pluginName = 'NhShapeAnimationPlugin';

  static defaultOptions = {
    handleContainerScroll: null,
    isOnContainer: false,
  };

  transformDelta(delta, event) {
    if (/wheel/.test(event.type) && this.options.handleContainerScroll) {
      this.options.handleContainerScroll(event);
    }

    return this.options.isOnContainer ? { x: 0, y: 0 } : delta;
  }
}

// usage
function Component() {
  useEffect(() => {
    function handleContainerScroll(event) {
      // access refs and states here
    }

    // init the scrollbar
    Scrollbar.init(target, {
      plugins: {
        NhShapeAnimationPlugin: {
          handleContainerScroll,
        },
      },
    });

    // or update the plugin option
    scrollbar.updatePluginOptions('NhShapeAnimationPlugin', {
      handleContainerScroll,
    });
  }, []);
}

Alternatively, you can also pass the refs and states as the options and update them inside your components.

These solutions are a bit tricky and chaotic for now, but I'll be sure to refactor the plugin system in the next major release! See #411

[Minozzzi]

This seems to work!!
I'll test it tomorrow, but in theory it seems to work. And you don't have to worry about complexity, this lib is the only one I thought actually did what it was intended to do, so I really appreciate the help.

I will try to dedicate some time to contribute to this amazing project

[Minozzzi]

Hey @idiotWu your solutions worked great. Thank you bro!!

[HectorLS]

Brilliant, way better than my approach ! 🎉
Thank you

[vibesudi]

It's so cool, Thanks.

[0xd22f9c]

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.

[robizzt]

But with Plugin it's better and cleaner.

[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.

[robizzt]

Just remove "import" line and change "ScrollbarPlugin" in class ModalPlugin extends ScrollbarPlugin { to Scrollbar.ScrollbarPlugin. No need for jQuery.

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

[dngraphisme]

Hello, i want a solution for jQuery please :(

Thanks for your help and your library

[idiotWu]

I don't really understand the issue here: the above code was written in plain JS and it should work no matter what library/framework you are using. If you want a solution in es5, you can either refer to #104 (comment) or paste the above code into babel transpiler.

[Mak-Pro]

I changed the code of the plugin itself a bit. I know this is not entirely correct. But no other idea came to mind.
You need to unminify the plugin code. And add a check for the presence of a class, which can be added when you need to pause the scroll.
Just find this pieces of code, and modify them like below

This is for desktop:
function st(t) {

        F(t)(t.options.delegateTo || t.containerEl, "onwheel" in window || document.implementation.hasFeature("Events.wheel", "3.0") ? "wheel" : "mousewheel", function (e) {

            if(!t.contentEl.classList.contains('**fixed**')) {
                var n = (function (t) {
                    if ("deltaX" in t) {
                        var e = pt(t.deltaMode);
                        return { x: (t.deltaX / ft.STANDARD) * e, y: (t.deltaY / ft.STANDARD) * e };
                    }
                    return "wheelDeltaX" in t ? { x: t.wheelDeltaX / ft.OTHERS, y: t.wheelDeltaY / ft.OTHERS } : { x: 0, y: t.wheelDelta / ft.OTHERS };
                })(e),
                r = n.x,
                o = n.y;
                t.addTransformableMomentum(r, o, e, function (t) {
                    t && e.preventDefault();
                });
            }
        });


    }

This is for mobile:

i(r, "touchmove", function (e) {
if(!t.contentEl.classList.contains('fixed')) {
if (!et || et === t) {
o.update(e);
var n = o.getDelta(),
r = n.x,
i = n.y;
t.addTransformableMomentum(r, i, e, function (n) {
n && e.cancelable && (e.preventDefault(), (et = t));
});
}
}

        }),

[natainditama]

thank you

[anku598]

Ho can i do this in the nuxtjs ? i want the same functionality when my nav is open and restore it when it false