Skip to content

[vaadin-scroller] Add streaming / stricky scroll theme variant. #10257

@TatuLund

Description

@TatuLund

Describe your motivation

Current behavior of the vaadin-scroll when implementing e.g. chat, is not optimal, see:

https://vaadin.com/forum/t/sticky-scroll-doesnt-work/178579

Describe the solution you'd like

You can enable sticky scroll with the following CSS additions to styles.css:

vaadin-scroller {
  flex: 1;
  scroll-snap-type: y proximity;
}

vaadin-scroller::after {
  display: block;
  content: '';
  scroll-snap-align: end;
  min-height: 1px;
}

To make UX even nicer, you could add streaming class name to the chat while it’s streaming new tokens and prefix the selectors with .streaming vaadin-scroller so it would only auto-scroll while streaming.

Describe alternatives you've considered

No response

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions