How to disable horizontal scolling #357
-
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! |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 4 replies
-
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',
},
},
});
To remove the scrollbar track, you can try: scrollbar.track.xAxis.element.remove() |
Beta Was this translation helpful? Give feedback.
-
Thanks for the reply ! Is it necessary to initialize the scroll before applying the track method ? For example:
|
Beta Was this translation helpful? Give feedback.
-
Yes. |
Beta Was this translation helpful? Give feedback.
You can use this plugin to disable scrolling in a particular direction: