How to scroll the ScrollArea to bottom

[lowerbound123]

I was creating a web for chat and I want to keep the scrollArea viewport to the bottom so that my users can see the latest discussions. I tried to use scrollTop, but it seems to be useless. Here is my code.

<script setup lang="ts">
const messageStore = useMessageStore()
const { globalMessage } = storeToRefs(messageStore)
const scrollAreaRef = ref(null)
onMounted(() => {
  const scrollAreaEl = scrollAreaRef.value?.$el || scrollAreaRef.value
  if (scrollAreaEl) {
    scrollAreaEl.scrollTop = scrollAreaEl.scrollHeight
  }
})
</script>

<template>
  <div id="message-field" class="flex h-full flex-col">
    <ScrollArea class="mx-2 mt-2 w-auto flex-1 rounded-lg border" ref="scrollAreaRef">
      <div
        v-for="message in globalMessage"
        :key="message.message_id"
        class="flex w-full flex-col p-3"
      >
        <div class="flex justify-between">
          <Badge variant="secondary" class="my-auto w-fit whitespace-nowrap">{{
            message.sender_name
          }}</Badge>
          <Badge variant="outline" class="my-auto w-fit whitespace-nowrap">
            {{ message.sent_time }}
          </Badge>
        </div>
        <span class="ml-6">{{ message.content }}</span>
      </div>
    </ScrollArea>
    <ButtonInput
      class="flex h-11 w-auto p-1.5"
      input-class="h-full w-full"
      button-class="h-full p-1.5 w-auto"
    >
      {{ $t('ph_submit') }}
    </ButtonInput>
  </div>
</template>

[lowerbound123]

I found a solution in issues.

const scrollToBottom = (behavior: 'auto' | 'smooth') => {
  nextTick(() => {
    if (scrollAreaRef.value) {
      const viewport = scrollAreaRef.value.$el.querySelector('[data-radix-scroll-area-viewport]')
      if (viewport) {
        viewport.scrollTo({
          top: viewport.scrollHeight,
          behavior: behavior
        })
      }
    }
  })
}

[sadeghbarati]

Check this issue and PR in radix-vue

• [Feature]: Property to pass in a scroll event handler to ScrollArea --> ScrollAreaViewport reka-ui#1096
• feat(ScrollArea): expose viewport and scrollTop function reka-ui#1120

[lowerbound123]

Thank you for your reply. It was very helpful.

However, I’m not very familiar with Vue.js and TypeScript. I modified the ScrollArea component to directly use the viewport. Is this an appropriate solution, or is there a more robust approach that I should consider?

To be more detailed, I add following code into the original components.

<script setup lang="ts">
const scrollAreaRootRef = ref<{ viewport: HTMLElement } | null>(null)
const { y, arrivedState } = useScroll(() => scrollAreaRootRef.value?.viewport)
const { y: smoothY } = useScroll(() => scrollAreaRootRef.value?.viewport, { behavior: 'smooth' })
const bottom = toRef(arrivedState, 'bottom')

const isBottom = () => bottom.value
const scrollToBottom = (behavior: string = 'auto') => {
  if (scrollAreaRootRef.value) {
    if (behavior === 'smooth') {
      smoothY.value = scrollAreaRootRef.value?.viewport.scrollHeight
    } else {
      y.value = scrollAreaRootRef.value?.viewport.scrollHeight
    }
  }
}

onMounted(() => {
  if (props.keepBottom && scrollAreaRootRef.value) {
    y.value = scrollAreaRootRef.value.viewport.scrollHeight
  }
})

interface Expose {
  isBottom: () => boolean
  scrollToBottom: (behavior?: string) => void
}

defineExpose<Expose>({
  isBottom,
  scrollToBottom
})
</script>

<template>
  <ScrollAreaRoot
    v-bind="delegatedProps"
    :class="cn('relative overflow-hidden', props.class)"
    ref="scrollAreaRootRef"
  >
    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
      <slot />
    </ScrollAreaViewport>
    <ScrollBar />
    <ScrollAreaCorner />
  </ScrollAreaRoot>
</template>