[Idea/v9] target-agnostic smooth scrolling engine

[idiotWu]

Motivation

Currently, this library focuses on interacting with DOM elements. However, since the smoothening/interpolation logic is independent of DOM, we can create an all-purpose smooth scrolling engine that can be used in DOM, canvas, and anywhere you want to smoothen the scrolling.

Note that the word "scrolling" here is an abstract concept that implies any interaction with mouse wheels or touch screens.

Proposal

In our next version, we want to split the core library into the following three packages:

1. @smooth-scrollbar/engine: this package is the target-agnostic scrolling engine that provides the basic smoothening(interpolation) algorithm and the rendering logic. You can think of it as [email protected] without event handlers. A minimal interface will be:

class SrollbarEngine {
  // sets or updates the sizes of container and content
  setSize(size) {}
  // sets scrolling delta
  setDelta(x, y) {}
  // increase scrolling delta
  addDelta(x, y) {}
  // scrolls to the specific position with easing
  scrollTo(x, y, duration, options) {}
  // sets scrolling position
  setPosition(x, y) {}
  // scrolling events
  on(event, handler) {}
  // the rendering loop
  protected render() {}
}

2. @smooth-scrollbar/event-handlers: the common event handlers including wheel, touch, and/maybe keyboard. (I'm not sure if this should be merged into the engine package.)
3. smooth-scrollbar: the DOM adapter that equals to [email protected]. We keep using this name for compatibility.

[nzmitch]

is "scrollTo" possible with our current version? even if the event handler isn't available is there still a way to scroll to a specific position or id onClick

[idiotWu]

is "scrollTo" possible with our current version? even if the event handler isn't available is there still a way to scroll to a specific position or id onClick

Yes! It can be implemented inside the engine.

——

Oh if you meant v8, we already have it: https://github.com/idiotWu/smooth-scrollbar/blob/develop/docs/api.md#scrollbarscrollto

[NilkOne]

Hello @idiotWu
Any news about this core library ?
I need the smooth algorithm to use it with a virtual canvas (not bigs height and witdh)
What files to see do you recommend to me to achieve this purpose ?

[idiotWu]

@NilkOne sorry I have been busy with a startup and didn't have much time to work on this project. As a workaround, I'd suggest you override the getSize() and setPosition() methods of the Scrollbar class to make it work with canvas.

1. scrollbar.getSize() should return the canvas geometry information in your case

smooth-scrollbar/src/scrollbar.ts

Lines 212 to 214 in 66c67b8

	getSize(): I.ScrollbarSize {
	return getSize(this);
	}

2. scrollbar.setPosition() should apply the scrolling position to the canvas

smooth-scrollbar/src/scrollbar.ts

Lines 240 to 254 in 66c67b8

	setPosition(
	x = this.offset.x,
	y = this.offset.y,
	options: Partial<I.SetPositionOptions> = {},
	) {
	const status = setPosition(this, x, y);
	if (!status || options.withoutCallbacks) {
	return;
	}
	this._listeners.forEach((fn) => {
	fn.call(this, status);
	});
	}

There may be more modifications required. Let me know if you need help :)