smooth-scrollbar icon indicating copy to clipboard operation
smooth-scrollbar copied to clipboard

[Idea/v9] target-agnostic smooth scrolling engine

Open idiotWu opened this issue 2 years ago • 2 comments

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() {}
}
  1. @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.)
  2. smooth-scrollbar: the DOM adapter that equals to [email protected]. We keep using this name for compatibility.

idiotWu avatar Nov 21 '22 10:11 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

nzmitch avatar Nov 27 '22 21:11 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

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

idiotWu avatar Nov 27 '22 21:11 idiotWu