Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Idea/v9] target-agnostic smooth scrolling engine #508

Open
idiotWu opened this issue Nov 21, 2022 · 2 comments
Open

[Idea/v9] target-agnostic smooth scrolling engine #508

idiotWu opened this issue Nov 21, 2022 · 2 comments
Assignees
Labels
accepted Feature requests that have been accepted. idea
Milestone

Comments

@idiotWu
Copy link
Owner

idiotWu commented Nov 21, 2022

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 smooth-scrollbar@8.x 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 smooth-scrollbar@8.x. We keep using this name for compatibility.
@idiotWu idiotWu added the idea label Nov 21, 2022
@idiotWu idiotWu self-assigned this Nov 21, 2022
@idiotWu idiotWu added this to the v9 milestone Nov 21, 2022
@idiotWu idiotWu added the accepted Feature requests that have been accepted. label Nov 22, 2022
@nzmitch
Copy link

nzmitch commented Nov 27, 2022

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
Copy link
Owner Author

idiotWu commented Nov 27, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accepted Feature requests that have been accepted. idea
Projects
Development

No branches or pull requests

2 participants