Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve smooth scroll behavior to prevent button flickering #1975

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Improve smooth scroll behavior to prevent button flickering #1975

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7b910a8
Improve smooth scroll behavior to prevent button flickering
hexart Mar 9, 2025
aecd465
refactor: move checkScrollEnd function to component level
hexart Mar 10, 2025
8da3c42
fix: improve scrollToPosition with smooth scroll handling
hexart Mar 10, 2025
185e930
refactor: simplify checkScrollEnd function
hexart Mar 10, 2025
305e7a4
Merge branch 'Chainlit:main' into feature/smooth-scroll
hexart Mar 10, 2025
33b1d5a
Merge branch 'Chainlit:main' into feature/smooth-scroll
hexart Mar 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor: simplify checkScrollEnd function
  • Loading branch information
@hexart
hexart committed Mar 10, 2025
commit 185e93051d2be1e2edac0d31f8f74908bffd231a
12 changes: 4 additions & 8 deletions frontend/src/components/chat/ScrollContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,11 +102,7 @@ export default function ScrollContainer({
};
}, [updateSpacerHeight]);

const checkScrollEnd = (
ref: React.RefObject<HTMLDivElement>,
setIsScrolling: (value: boolean) => void,
setShowScrollButton: (value: boolean) => void
) => {
const checkScrollEnd = () => {
if (!ref.current) return;

const prevScrollTop = ref.current.scrollTop;
Expand All @@ -122,7 +118,7 @@ export default function ScrollContainer({
const atBottom = scrollTop + clientHeight >= scrollHeight - 10;
setShowScrollButton(!atBottom);
} else {
checkScrollEnd(ref, setIsScrolling, setShowScrollButton);
checkScrollEnd();
}
}, 100);
};
Expand All @@ -141,7 +137,7 @@ export default function ScrollContainer({
}

setShowScrollButton(false);
checkScrollEnd(ref, setIsScrolling, setShowScrollButton);
checkScrollEnd();
};

const scrollToPosition = () => {
Expand All @@ -157,7 +153,7 @@ export default function ScrollContainer({
});

setShowScrollButton(false);
checkScrollEnd(ref, setIsScrolling, setShowScrollButton);
checkScrollEnd();
};

const handleScroll = () => {
Expand Down
Loading