material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-08-17 09:30:27 +03:00
Code Issues Projects Releases Wiki Activity

fix(tabs): default scroll-behavior: smooth not working

Browse Source 
Fixes #5497

PiperOrigin-RevId: 610915724
This commit is contained in:
Elizabeth Mitchell 2024-02-27 16:43:42 -08:00 committed by Copybara-Service
parent c6ffd70fc8
commit 274ce3e4e0
2 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tabs/internal/_tabs.scss
View File

@ -29,6 +29,8 @@
display: flex;
height: 100%;
overflow: inherit;
scroll-behavior: inherit;
scrollbar-width: inherit;
justify-content: space-between;
width: 100%;
}

7
tabs/internal/tabs.ts
View File

@ -157,8 +157,11 @@ export class Tabs extends LitElement {
const min = offset - scrollMargin;
const max = offset + extent - hostExtent + scrollMargin;
const to = Math.min(min, Math.max(max, scroll));
// TODO(b/299934312): improve focus smoothness
const behavior: ScrollBehavior = !this.focusedTab ? 'smooth' : 'instant';
// When a tab is focused, use 'auto' to use the CSS `scroll-behavior`. The
// default behavior is smooth scrolling. However, when there is not a tab
// focused on initialization, use 'instant' to immediately bring the focused
// tab into view.
const behavior: ScrollBehavior = !this.focusedTab ? 'instant' : 'auto';
this.tabsScrollerElement.scrollTo({behavior, top: 0, left: to});
}