[FEATURE] Expose more scroll info in useScroll

[jeffijoe]

Is your feature request related to a problem? Please describe.

I'm trying to implement a scroll-fade effect. I want the scroll-fade to be linked to the scrollX, which already works. However, I need a way to derive the scrollX, but from the opposite side. That is, once scrolled all the way to the end, this value should be zero. It is basically scrollX but relative to the end of the scroll port.

Describe the solution you'd like

The value could be derived using a transform if the scroll port width and height are exposed as motion values through useScroll.

Describe alternatives you've considered

I tried implementing what I needed using what was available:

/**
 * Returns the scroll value of the specified axis (default `x`)
 * as a value from the start and a value from the end.
 * That is, when the scroll position is at the start, the start value is 0 and the
 * end value is negative whatever the scroll size is. Similarly, when the scroll
 * position is at the end, the start value will be whatever the max scroll value
 * is, and the end value will be 0.
 * @param options
 */
function useScrollValues(options: Parameters<typeof useScroll>[0]) {
  const { scrollY, scrollYProgress, scrollX, scrollXProgress } =
    useScroll(options)

  const axis = options?.axis || 'x'

  const progress = axis === 'x' ? scrollXProgress : scrollYProgress
  const absolute = axis === 'x' ? scrollX : scrollY
  const end = useTransform([progress, absolute], ([p, abs]: number[]) => {
    if (abs === 0 && p === 0) {
      // This is what made it fall apart - when at the start of scrolling,
      // both of these are zero and so I can't calculate the total size
      // to derive whats left.
      return 0
    }
    const total = abs / p
    const left = total - abs
    return left
  })

  return {
    end,
    start: absolute,
  }
}

Additional context

The effect I'm after is the fade on both sides of the tab bar when scrolling.