Programmatic scrolling with ScrollControls

[janvarsa]

Is it possible to scroll using a function instead of the mouse, similar to the window.scrollBy(x,y) function? This would be helpful when I want to scroll at a steady pace while recording a screen capture, for example. A useful implementation might be something like scrollBy(distance, duration) where the duration parameter could be a measure of time in ms.

[caoandong]

You can add a helper function to scroll the container el when you define state in ScrollControls here.

For example,

const state = {
  ...
  /**
   * Scroll to target offset in range [0, 1].
   * @param targetOffset Target offset value in [0, 1].
   */
  scrollTo: (targetOffset: number) => {
      if (el) {
          const containerLength = size[horizontal ? 'width' : 'height'];
          const scrollLength = el[horizontal ? 'scrollWidth' : 'scrollHeight'];
          const scrollThreshold = scrollLength - containerLength;
          const targetPixels = targetOffset * scrollThreshold; // Convert offset to pixel w.r.t the container
          el.scrollTo({
              top: horizontal ? 0 : targetPixels,
              left: horizontal ? targetPixels : 0,
          });
          state.offset = targetOffset; // Set offset to target offset if you want to disable damping
      }
  },
}

[elizamilioni]

You can also use the variable scroll from useScroll() and onClick invoke:

scroll.el.scrollTo({top: {yourScrollOffset} * (scroller.el['scrollHeight'] - {yourScreenHeight}) })

[janvarsa]

I would like to scroll the Canvas element rather than the container. For example, I can set scroll.offset = 0.5 and the canvas will jump there for 1 frame, but then it snaps back to the scroll bar's last location on the next frame. How do I advance the Canvas's scroll bar programmatically?