Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-11-01 05:21:32 +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") { scrollTabContainer(direction: number, behavior: ScrollBehavior = "smooth") {
const currentScrollLeft = this.$tabScrollingContainer[0]?.scrollLeft; this.$tabScrollingContainer[0].scrollBy({
this.$tabScrollingContainer[0].scrollTo({ left: direction,
left: currentScrollLeft + direction,
behavior behavior
}); });
}; };
setupScrollEvents() { 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.$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)); this.$scrollButtonLeft[0].addEventListener('click', () => this.scrollTabContainer(-200));