mirror of
https://github.com/material-components/material-web.git
synced 2024-08-17 09:30:27 +03:00
fix(tabs): default scroll-behavior: smooth
not working
Fixes #5497 PiperOrigin-RevId: 610915724
This commit is contained in:
parent
c6ffd70fc8
commit
274ce3e4e0
@ -29,6 +29,8 @@
|
||||
display: flex;
|
||||
height: 100%;
|
||||
overflow: inherit;
|
||||
scroll-behavior: inherit;
|
||||
scrollbar-width: inherit;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
@ -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});
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user