Implement horizontal scrolling using mouse wheel + smooth scrolling doesn't work using mouse wheel

[WilliamVenner]

Hello,

This library is capable of implementing horizontal scrolling using mouse wheel, but there is currently no way to do this.

I managed to get it to work simply by changing deltaX to deltaY in here: https://github.com/ilyashubin/scrollbooster/blob/2713dd61ede0db48edd1bb1ff6b4450a35c5fd67/src/index.js#L480

However, when I did this, I noticed that the horizontal scrolling via mousewheel does indeed work, but it does not smoothly scroll and instead just snaps in place.

This will be one hell of a powerful library if it can be used for many uses cases like this.

Quick webm showing behaviour: http://i.venner.io/2020-03-12_20-03-12.webm

[jonasfeige]

I managed to implement horizontal scrolling through the onWheel event like this:

onWheel(state, event) {
      const newPosition = (state.position.x += event.deltaY * 3); // Multiply with whatever you want and feels good for your usecase
      booster.scrollTo({ x: newPosition, y: state.position.y });
    }

This works very well and includes smooth scrolling. The only thing I am struggling with is that this way, you can essentially scroll beyond your actual content forever. Trying to find a solution for this right now and will update here if I do.

[git-tate]

@jonasfeige You got me started, so here is the rest! I added 5px extra padding on the right side, so you can remove the " + 5".

onWheel: (state, event) => {
        let newPosition = (state.position.x += event.deltaY * 1.2); // 1.2 is amount to scroll by, can change if needed
        if (newPosition < 0) {
          newPosition = 0;
        }
        if (newPosition > 0 && this.sb.viewport.width > this.sb.content.width- newPosition) {
          newPosition = (this.sb.content.width - this.sb.viewport.width) + 5;
        }
        this.sb.scrollTo({ x: newPosition, y: state.position.y });
        event.preventDefault();
      }