angular / angular/components

Support CSS scroll-snap-type for cdk/virtual-scroll

Open
#16,038 10 comments 13 reactions 0 assignees View on GitHub
area: cdk/scrolling feature P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### What is the expected behavior?
Setting CSS `scroll-snap-type: both mandatory;` should enable scroll snapping.

#### What is the current behavior?
No scroll snapping ever happens.

#### What are the steps to reproduce?
https://stackblitz.com/angular/dnnjdjbpaaag?file=app%2Fcdk-virtual-scroll-horizontal-example.css

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
"@angular/cdk": "7.3.7",
"@angular/core": "7.2.15",
"typescript": "~3.1.1"
Browsers: all

#### Is there anything else we should know?
Closely related to #14833 but it could be fixed other way too.

Contributor guide

Open the contributing guide

Research direction

Start with the cdk/virtual-scroll implementation and the linked StackBlitz reproduction, then compare the expected behavior with related issue #14833. Confirm how scroll-snap-type is handled across the affected virtual-scroll setup; done means the reproduction supports both-axis mandatory CSS scroll snapping in the listed browser environments.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.