fix mouse scroll (#151)

This commit is contained in:
Red J Adaya 2023-12-16 08:15:45 +08:00 committed by GitHub
parent f9d0e63d0c
commit 4ff5dcf1e0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -31,6 +31,7 @@ class ScreenTabs extends React.Component<{ session: Session }, { showingScreens:
lastActiveScreenId: string = null; lastActiveScreenId: string = null;
dragEndTimeout = null; dragEndTimeout = null;
scrollIntoViewTimeout = null; scrollIntoViewTimeout = null;
deltaYHistory = [];
constructor(props: any) { constructor(props: any) {
super(props); super(props);
@ -79,24 +80,36 @@ class ScreenTabs extends React.Component<{ session: Session }, { showingScreens:
GlobalCommandRunner.switchScreen(screenId); GlobalCommandRunner.switchScreen(screenId);
} }
// @boundMethod @boundMethod
// handleWheel(event: WheelEvent) { handleWheel(event: WheelEvent) {
// if (!this.tabsRef.current) return; if (!this.tabsRef.current) return;
// // Prevent the default vertical scrolling // Add the current deltaY to the history
// event.preventDefault(); this.deltaYHistory.push(Math.abs(event.deltaY));
if (this.deltaYHistory.length > 5) {
this.deltaYHistory.shift(); // Keep only the last 5 entries
}
// // Scroll horizontally instead // Check if any of the last 5 deltaY values are greater than a threshold
// this.tabsRef.current.scrollLeft += event.deltaY; let isMouseWheel = this.deltaYHistory.some((deltaY) => deltaY > 0);
// }
if (isMouseWheel) {
// It's likely a mouse wheel event, so handle it for horizontal scrolling
this.tabsRef.current.scrollLeft += event.deltaY;
// Prevent default vertical scroll
event.preventDefault();
}
// For touchpad events, do nothing and let the browser handle it
}
componentDidMount(): void { componentDidMount(): void {
this.componentDidUpdate(); this.componentDidUpdate();
// // Add the wheel event listener to the tabsRef // Add the wheel event listener to the tabsRef
// if (this.tabsRef.current) { if (this.tabsRef.current) {
// this.tabsRef.current.addEventListener("wheel", this.handleWheel, { passive: false }); this.tabsRef.current.addEventListener("wheel", this.handleWheel, { passive: false });
// } }
} }
componentWillUnmount() { componentWillUnmount() {