Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-31 04:51:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(tab-row): Added smooth decay logic to ensure responsive and fluid animation

Browse Source
This commit is contained in:
SiriusXT 2025-05-30 20:28:17 +08:00
parent ef581b181f
commit dd4cb7de7d
1 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
apps/client/src/widgets/tab_row.ts
View File

@ -378,16 +378,37 @@ export default class TabRowWidget extends BasicWidget {
}
scrollTabContainer(direction: number, behavior: ScrollBehavior = "smooth") {
const currentScrollLeft = this.$tabScrollingContainer[0]?.scrollLeft;
this.$tabScrollingContainer[0].scrollTo({
left: currentScrollLeft + direction,
this.$tabScrollingContainer[0].scrollBy({
left: direction,
behavior
});
};
setupScrollEvents() {
let deltaX = 0;
let isScrolling = false;
const stepScroll = () => {
if (Math.abs(deltaX) > 5) {
const step = Math.round(deltaX * 0.2);
deltaX -= step;
this.scrollTabContainer(step, "instant");
requestAnimationFrame(stepScroll);
} else {
this.scrollTabContainer(deltaX, "instant");
deltaX = 0;
isScrolling = false;
}
};
this.$tabScrollingContainer[0].addEventListener('wheel', (event) => {
this.scrollTabContainer(event.deltaY * 1.5);
if (!event.shiftKey || event.deltaX === 0) {
event.preventDefault();
// Clamp deltaX between TAB_CONTAINER_MIN_WIDTH and TAB_CONTAINER_MIN_WIDTH * 3
deltaX += Math.sign(event.deltaY) * Math.max(Math.min(Math.abs(event.deltaY), TAB_CONTAINER_MIN_WIDTH * 3), TAB_CONTAINER_MIN_WIDTH);
if (!isScrolling) {
isScrolling = true;
stepScroll();
}
}
});
this.$scrollButtonLeft[0].addEventListener('click', () => this.scrollTabContainer(-200));