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

fix(tab-row): ensure similar behavior between horizontal/vertical scrolling

Browse Source
This commit is contained in:
SiriusXT 2025-06-05 17:54:34 +08:00
parent c40e224727
commit b721bb4cfc
1 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -385,31 +385,42 @@ export default class TabRowWidget extends BasicWidget {
}; };
setupScrollEvents() { setupScrollEvents() {
let deltaX = 0; let pendingScroll = 0;
let isScrolling = false; let isScrolling = false;
const stepScroll = () => { const stepScroll = () => {
if (Math.abs(deltaX) > 5) { if (Math.abs(pendingScroll) > 10) {
const step = Math.round(deltaX * 0.2); const step = Math.round(pendingScroll * 0.2);
deltaX -= step; pendingScroll -= step;
this.scrollTabContainer(step, "instant"); this.scrollTabContainer(step, "instant");
requestAnimationFrame(stepScroll); requestAnimationFrame(stepScroll);
} else { } else {
this.scrollTabContainer(deltaX, "instant"); this.scrollTabContainer(pendingScroll, "instant");
deltaX = 0; pendingScroll = 0;
isScrolling = false; isScrolling = false;
} }
}; };
this.$tabScrollingContainer[0].addEventListener('wheel', async (event) => { this.$tabScrollingContainer[0].addEventListener('wheel', async (event) => {
if (!event.shiftKey && event.deltaX === 0) { if (utils.isCtrlKey(event) || event.altKey) {
event.preventDefault(); return;
// 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); event.preventDefault();
if (!isScrolling) { event.stopImmediatePropagation();
isScrolling = true; if (!event.shiftKey) {
stepScroll(); // Set an upper limit to avoid scrolling too fast
// no lower limit is set because touchpad deltas are usually small
const delta = Math.sign( event.deltaX + event.deltaY ) * Math.min(Math.abs(event.deltaX + event.deltaY), TAB_CONTAINER_MIN_WIDTH * 3);
// Check if the device has reduced motion enabled
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
this.scrollTabContainer(delta, "instant");
} else {
pendingScroll += delta
if (!isScrolling) {
isScrolling = true;
stepScroll();
}
} }
} else if (event.shiftKey) { } else if (event.shiftKey) {
event.preventDefault();
if (event.deltaY > 0) { if (event.deltaY > 0) {
await appContext.tabManager.activateNextTabCommand(); await appContext.tabManager.activateNextTabCommand();
} else { } else {