Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 2 additions & 0 deletions docs/chat.md
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,8 @@ Use a normal scroll container and normal item order. You do not need `flex-direc

- Use stable message ids with `getItemKey`.
- Give the scroll element a fixed height and `overflow: auto`.
- Set `overflow-anchor: none` on the scroll element so the browser's own scroll anchoring does not fight the virtualizer's prepend compensation.
- Set `overscroll-behavior: none` on the scroll element. Safari discards a `scrollTop` write made while the scroller is rubber-banding past its top edge, so history that lands mid-bounce would lose its anchor; suppressing the bounce closes that window.
- Call `measureElement` for dynamic message heights.
- Use `anchorTo: 'end'` for prepend stability and streaming bottom growth.
- Use `followOnAppend` when new output should follow only from the latest position.
Expand Down
4 changes: 4 additions & 0 deletions examples/react/chat/src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,10 @@ button:hover {
min-height: 0;
overflow: auto;
overflow-anchor: none;
/* Suppress the elastic bounce at the edges (Safari): a scrollTop write
made mid-bounce is discarded by WebKit, so a prepend landing during the
bounce would lose its anchor (#1287). */
overscroll-behavior: none;
width: 100%;
}

Expand Down
Loading