diff --git a/web/src/app/_components/message-list-view.tsx b/web/src/app/_components/message-list-view.tsx
index aa3b3b047..d414fb251 100644
--- a/web/src/app/_components/message-list-view.tsx
+++ b/web/src/app/_components/message-list-view.tsx
@@ -76,6 +76,7 @@ export function MessageListView({
     <ScrollContainer
       className={cn("flex h-full w-full flex-col overflow-hidden", className)}
       scrollShadowColor="var(--app-background)"
+      autoScrollToBottom
     >
       <ul className="flex flex-col">
         {messageIds.map((messageId) => (
diff --git a/web/src/app/_components/research-block.tsx b/web/src/app/_components/research-block.tsx
index 267119547..fb3507caa 100644
--- a/web/src/app/_components/research-block.tsx
+++ b/web/src/app/_components/research-block.tsx
@@ -133,6 +133,7 @@ export function ResearchBlock({
             <ScrollContainer
               className="px-5pb-20 h-full"
               scrollShadowColor="var(--card)"
+              autoScrollToBottom={!hasReport || reportStreaming}
             >
               {reportId && researchId && (
                 <ResearchReportBlock
@@ -149,7 +150,11 @@ export function ResearchBlock({
             forceMount
             hidden={activeTab !== "activities"}
           >
-            <ScrollContainer className="h-full" scrollShadowColor="var(--card)">
+            <ScrollContainer
+              className="h-full"
+              scrollShadowColor="var(--card)"
+              autoScrollToBottom={!hasReport || reportStreaming}
+            >
               {researchId && (
                 <ResearchActivitiesBlock
                   className="mt-4"
diff --git a/web/src/app/_components/scroll-container.tsx b/web/src/app/_components/scroll-container.tsx
index f57d76954..a3a546e25 100644
--- a/web/src/app/_components/scroll-container.tsx
+++ b/web/src/app/_components/scroll-container.tsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 // SPDX-License-Identifier: MIT
 
+import { useEffect } from "react";
 import { useStickToBottom } from "use-stick-to-bottom";
 
 import { ScrollArea } from "~/components/ui/scroll-area";
@@ -11,15 +12,25 @@ export function ScrollContainer({
   children,
   scrollShadow = true,
   scrollShadowColor = "var(--background)",
+  autoScrollToBottom = false,
 }: {
   className?: string;
   children?: React.ReactNode;
   scrollShadow?: boolean;
   scrollShadowColor?: string;
+  autoScrollToBottom?: boolean;
 }) {
   const { scrollRef, contentRef } = useStickToBottom({
     initial: "instant",
   });
+
+  useEffect(() => {
+    if (!autoScrollToBottom) {
+      scrollRef.current = null;
+      contentRef.current = null;
+    }
+  }, [autoScrollToBottom, contentRef, scrollRef]);
+
   return (
     <div className={cn("relative", className)}>
       {scrollShadow && (