Skip to content

Value API & Relative Scrolling #80

@ganderzz

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

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