Skip to content

Value API & Relative Scrolling #80

Description

@ganderzz

Add the ability to scroll by a relative amount (ie. if the window is scrolled down by 100px, we should be able to scroll by -50px to end at 50px scrolled)

This is resolved:
#79


The way this is handled also gives rise to extensible value handlers. An example with the new relative() function:

<ScrollTo>
   {({ scrollTo, relative }) => (
       <button onClick={() => scrollTo({ y: relative(-50) })}>Click Me</button>
   )}
</ScrollTo>

Looking at the implementation of relative(): https://github.com/ganderzz/react-scroll-to/pull/79/files#diff-cfc450c9626bea8788ec583b684d167b

Users could add their own functions:

export function addTen(input) {
  if (!input || typeof input !== "number") {
    console.warn(
      `Invalid input (${input}) given to relative(). Is this a number?`
    );
  }

   return function(element, isHorizontal) {
    if (!element || !isHorizontal) {
      return input;
    }

     return input + 10;
  };
}
<ScrollTo>
   {({ scrollTo, relative }) => (
       <button onClick={() => scrollTo({ y: addTen(20) })}>Click Me</button>
   )}
</ScrollTo>

^ Will scroll down by 30px

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions