How to disable horizontal scolling

[TobiasDonaubauer]

I am using smooth-scrollbar in version 8.4.0.

Currently I have content which width and height is greater than the width and height of the container.

Nevertheless I only like to scroll vertical. Therefore I would like to disable the horizontal scrolling plus hide the horizontal scrollbar.

How can I achive the behavior?

Thanks for your support!

[idiotWu]

I would like to disable the horizontal scrolling

You can use this plugin to disable scrolling in a particular direction:

// see also: https://github.com/idiotWu/react-smooth-scrollbar/issues/15#issuecomment-335047892
import Scrollbar, { ScrollbarPlugin } from 'smooth-scrollbar';

class DisableScrollPlugin extends ScrollbarPlugin {
  static pluginName = 'disableScroll';

  static defaultOptions = {
    direction: '',
  };

  transformDelta(delta) {
    if (this.options.direction) {
      delta[this.options.direction] = 0;
    }

    return { ...delta };
  }
}

// load the plugin
Scrollbar.use(DisableScrollPlugin);

// usage
Scrollbar.init(elem, {
  plugins: {
    disableScroll: {
      direction: 'x',
    },
  },
});

hide the horizontal scrollbar

To remove the scrollbar track, you can try:

scrollbar.track.xAxis.element.remove()

[pszczesniak]

@idiotWu In Scrollbar.init i needed to pass params in different way:
disableScroll: { direction: 'y' }, - in my case i wanted to disable scroll on X axis.

[idiotWu]

Simply change 'y' to 'x'.

[pszczesniak]

Yes, i know :) I was talking about passing parameter... not like this: disableScroll: 'y', but this way: disableScroll: { direction: 'y' }

[idiotWu]

Oops! You found a mistake in the code XD!

Actually, it should be used in the same way as yours:

Scrollbar.init(elem, {
  plugins: {
    disableScroll: {
      direction: 'x',
    },
  },
});

[cardacci]

Thanks for the reply !

Is it necessary to initialize the scroll before applying the track method ?

For example:

const Scroll = SmoothScrollbar.init(this.scrollbarComponentRef.current);
if (disableXAxis) {
    Scroll.track.xAxis.element.remove();
}

[idiotWu]

Yes. track is a property of scrollbar instance.