Disable the scroll to bottom using useStickToBottom

[marcoripa96]

I cannot find a way to disable the scroll anchoring at the bottom. For example if the content of the chat changes the chat gets scrolled all the way down involuntarily.

I cannot seem to find any info about that in the docs. I only found I can disable the initial animation, but nothing other than that.

[armchair-traveller]

Are you saying to stop auto scrolling?

const { stopScroll } = useStickToBottomContext() -- this is in the demo, and in the type StickToBottomInstance

and using the hook const { stopScroll } = useStickToBottom()

[ardblok]

It would be helpful to have a way to programmatically disable the scroll-to-bottom behavior altogether.

In my use case, I want auto-scroll while content is streaming, but not once streaming is complete. The content height may still change after that, which triggers the resize function, but at that point I no longer want automatic scrolling. I’d like to preserve the scroll position once streaming ends, so re-rendering the component or swapping refs based on isStreaming isn’t an option.

My current workaround is to use a small setTimeout in an effect to stop the scroll after it has started. The problem is that setTimeout isn’t consistent: sometimes it fires too late and causes the UI to jump, and sometimes too early so the hook runs again afterward.

useEffect(() => {
  // Small timeout so stopScroll fires after auto-scroll begins
  setTimeout(() => {
    // Stop scroll from useStickToBottom hook
    stopScroll()
    // Reset scroll position to top
    if (scrollRef.current) {
      scrollRef.current.scrollTop = 0
    }
  }, 5)
}, [contentId, scrollRef, stopScroll])

Ideally the hook could expose a method to explicitly toggle auto-scroll on and off.

[nwalters512]

In my use case, I want auto-scroll while content is streaming, but not once streaming is complete.

This is exactly the use case I had in mind. Specifically, I have animated expand/collapse sections that can force the contents of the scrollable area to exceed the height of that container, which triggers a scroll. I'd hoped that I could do something like this:

  const stickToBottom = useStickToBottom({
    initial: isStreaming ? 'smooth' : false,
    resize: isStreaming ? 'smooth' : undefined,
  });

But this doesn't work.

@samdenty would you consider a PR adding support for resize: false in the hook options? This would be backwards-compatible as a boolean wasn't previously an accepted value for resize.

[nwalters512]

cc @Aslemammad since it seems like @samdenty dropped off GitHub around the middle of this year.