Stop scroll on x axis

[BillyJoeDev]

Hey guys,

Just need some help on figuring out how to disable the scrolling on the X-Axis without the NPM install. Currently just using the plain js file and importing through unpkg.com. Any help would be nice!

Thanks!

[sadeghbarati]

Hi check this #481 (comment)

window.myScrollbar = Scrollbar.init(document.getElementById('#scrollbar'))

const setMomentum = myScrollbar.prototype.setMomentum;

myScrollbar.prototype.setMomentum = function(x, y) {
    setMomentum.call(this, 0, y);
}

html {
  scroll-behavior: initial;
}

html, body {
  height: 100%;
}

body 
  position: relative;
  overflow: hidden;
}

#scrollbar {
  width: 100%;
  height: 100vh;
  height: -webkit-fill-available;
}

[BillyJoeDev]

Hi check this #481 (comment)

console.log(window) // see if Scrollbar exist on window object

const setMomentum = Scrollbar.prototype.setMomentum;

Scrollbar.prototype.setMomentum = function(x, y) {
    setMomentum.call(this, 0, y);
}

I currently am injecting like this:
var Scrollbar = window.Scrollbar;
const scrollbar = Scrollbar.init(document.querySelector('body'));

What would "Scrollbar" be in your example?

[sadeghbarati]

smooth-scrollbar is UMD based package
https://github.com/idiotWu/smooth-scrollbar/blob/develop/scripts/webpack.prod.js#L18

So it's will add its own API to window object
Scrollbar or window.Scrollbar output will be the same unless you change it

Kiwi browser Developer tools

Actually you right with my example it will update Scrollbar API globally

You can pick any name you want then update Scrollbar API based on your need

window.myScrollbar = Scrollbar.init

And I suggest init scrollbar on another element instead of body

[BillyJoeDev]

After executing the code below after initializing the scrollbar, it still allows me to scroll to the right of the page.

https://gyazo.com/d8d60ab82ea2419600d82c5a418af6d7

[sadeghbarati]

This workaround is based on Cuberto plugins, and should be work

class DisableScrollPlugin extends ScrollbarPlugin {
  static pluginName = 'disableScroll';
  
  static defaultOptions = {
    direction: null;
  }
  
  transformDelta(delta) {
    if(this.options.direction) {
      delta[this.options.direction] = 0;
    }
    
    return { ...delta };
  }
}


window.myScrollbar = Scrollbar.init(document.getElementById('#scrollbar'), {
  damping: 0.2,
  plugins: {
    disableScroll: { direction: 'x' }
  }
})

---

or you can use another Cuberto plugin called SoftScroll

class SoftScrollPlugin extends Scrollbar.ScrollbarPlugin {
  static pluginName = 'SoftScroll';
  
  transformDelta(delta, fromEvent) {
    const dirX = delta.x > 0 ? 1 : -1;
    const dirY = delta.y > 0 ? 1 : -1;

    if (dirX === this.lockX || dirY === this.lockY) {
      return {x: 0, y: 0};
    } else {
      this.lockX = null;
      this.lockY = null;
    }

    return delta;
  }

  onRender(Data2d) {
    const {x, y} = Data2d;

    // Up
    if (y < 0 && !this.lockY && Math.abs(y) >= this.scrollbar.scrollTop) {
      this.scrollbar.setMomentum(0, -this.scrollbar.scrollTop);
      this.lockY = -1;
    }

    // Left
    if (x < 0 && !this.lockX && Math.abs(x) >= this.scrollbar.scrollLeft) {
      this.scrollbar.setMomentum(-this.scrollbar.scrollLeft, 0);
      this.lockX = -1;
    }

    // Right
    if (x > 0 && !this.lockX && Math.abs(x) >= (this.scrollbar.limit.x - this.scrollbar.scrollLeft)) {
      this.scrollbar.setMomentum((this.scrollbar.limit.x - this.scrollbar.scrollLeft), 0);
      this.lockX = 1;
    }

    // Down
    if (y > 0 && !this.lockY && Math.abs(y) >= (this.scrollbar.limit.y - this.scrollbar.scrollTop)) {
      this.scrollbar.setMomentum(0, (this.scrollbar.limit.y - this.scrollbar.scrollTop));
      this.lockY = 1;
    }

    if(y === 0) this.lockY = null;
    if(x === 0) this.lockX = null;
  }
}
Scrollbar.use(SoftScroll)

window.myScrollbar = Scrollbar.init(...)

[sadeghbarati]

I am not using npm I am just manually importing the unpkg link.

I know, use SoftScroll code I commented on above ( no export )

[BillyJoeDev]

I have went ahead and did that and can not seem to get it to work.

https://gyazo.com/9fdff90d1a99c3eaea700c4eef135e70
https://i.imgur.com/qa7jUIC.png

[sadeghbarati]

Ok, please share your demo if it possible

I'll look at it

[BillyJoeDev]

Current site is hosted at: https://vanity-rust.com/

[sadeghbarati]

I see your demo, you still initialize the scrollbar on body tag

Your menu caused scroll X

Follow this pattern

<body>
  <main data-scrollbar>
    
  </main>

  <!-- put your fixed elements (like menu) outside of scrollbar element -->

  <Menu>
</body>

[BillyJoeDev]

I found a temp sloppy fix, you can set scrollbar.limit.x to 0 after initializing the scroll bar, then add a event listener for scroll and set the limit to 0 in that as well. Seems to do the trick, although is definitely sloppy.