MacOS System trackpad gestures overrides Google Sheets' two finger side scrolling using the trackpad

yowhenyow

Hello just installed Vivaldi browser. I was looking for a fix for this one but can't find anything other than changing the system trackpad gesture type. My issue is that when side scrolling through google sheets, the two finger swipe left or right causes the page to go Forward or Backward. This isn't the case for other browsers and I've also tested two finger scrolling on Microsoft Excel on the web but it's working fine. From what I've tested so far this only does it to Google Sheets.

I was hoping if this could be fixed eventually since I use the trackpad all the time and I don't want to change the system gesture since I'm used to three finger dragging. I also can't find any browser extension that can help with this.

Image shows that when dragging two fingers from right to left, it goes Forward as seen on the arrow at the right side. It also goes Backward when doing the opposite.

luetage

@yowhenyow Maybe check Vivaldi settings. Could be this is set to history forward/backward. Can’t test, don’t have a desktop touch device.

yowhenyow

I tried removing those gestures but it's not the history forward/backward. I still can't slide to the right/left side of the spreadsheets without triggering the Forward and Backward buttons

yowhenyow

It works when I turn this setting off:

I can swipe throught the google sheets anywhere freely with this however I can't use the two finger side scrolling on any other website anymore. I get that there is another shortcut for that which is Command + [ for Back and Command + ] for Forward but it's just an integral part of my work so It's really a bummer. I really like Vivaldi but I gues I'll just have to use another browser and wait for this side scrolling behaviour on Google Sheets to get normal like most browsers.

Found this thread and we have a pretty similar experience

https://forum.vivaldi.net/topic/10899/how-to-avoid-navigating-to-previously-viewed-page-when-scrolling-page-horizontally-2-finger-swipe/3

yowhenyow

I just created a workaround for this one by loading unpacked browser extension. Here are the files:

manifest.json

{
  "manifest_version": 3,
  "name": "Google Sheets Side Scroll Fix",
  "version": "1.2",
  "description": "Prevent back and forward navigation on trackpad gestures while side scrolling in Google Sheets.",
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["https://docs.google.com/spreadsheets/*"],
      "js": ["content.js"]
    }
  ]
}

content.js

document.addEventListener('wheel', function(event) {
  // Check if the wheel event is horizontal
  if (Math.abs(event.deltaX) > 0) {
    // If the shift key is not pressed, prevent the default back/forward navigation
    if (!event.shiftKey) {
      event.preventDefault();
    } else {
      // If the shift key is pressed, allow horizontal scrolling
      // Find the nearest scrollable parent
      let scrollableParent = event.target;
      while (scrollableParent && !scrollableParent.scrollWidth) {
        scrollableParent = scrollableParent.parentNode;
      }

      // If a scrollable parent is found, scroll it
      if (scrollableParent) {
        scrollableParent.scrollLeft += event.deltaX;
      }
    }
  }
}, { passive: false });

This only works on google sheets. If you want to try this one, you need to create a folder containing a manifest.json and a content.js file. copy each line of code above to it's respective file and then load this in the extensions page. enable developer mode and load unpacked to where the folder's directory is.

How this works is by default, page forward and backwards navigation by side scrolling won't activate, but the tabs bar is also stationary so you can't scroll through. if you need to scroll through the tabs bar, you need to press the Shift key and then it unlocks side scrolling. But when used in the cells area, it will also activate the page forward and back navigation. It's just a fast fix and I can't make chatgpt make it work the normal way for now. I really hope that this gets fixed eventually since I use google sheets most of the time and I really like this browser.

luetage

@yowhenyow Good job on finding a workaround. The extension is a bit overkill. You should be able to write a simple userscript and load the .user.js file directly in Vivaldi.

yowhenyow

@luetage really? I didn't have any other idea before on how to do it so extension it is haha. I'm new to mac so I don't know how to mess with the program files currently.

But anyway, I have updated the browser extension code here:

content.js

// Variable to track if the mouse is hovering over the tab bar
let isHoveringTabBar = false;

// Function to check if the event target is within the tab bar
function isWithinTabBar(target) {
  return target.closest('.docs-sheet-tab') !== null;
}

// Mouseover event listener to detect when the mouse enters the tab bar
document.addEventListener('mouseover', function(event) {
  if (isWithinTabBar(event.target)) {
    isHoveringTabBar = true;
  }
});

// Mouseout event listener to detect when the mouse leaves the tab bar
document.addEventListener('mouseout', function(event) {
  if (isWithinTabBar(event.target)) {
    isHoveringTabBar = false;
  }
});

// Wheel event listener for horizontal scrolling
document.addEventListener('wheel', function(event) {
  // Check if the wheel event is horizontal
  if (Math.abs(event.deltaX) > 0) {
    // If the mouse is not hovering over the tab bar, prevent the default back/forward navigation
    if (!isHoveringTabBar) {
      event.preventDefault();
    } else {
      // If hovering over the tab bar, allow horizontal scrolling
      // Find the nearest scrollable parent
      let scrollableParent = event.target;
      while (scrollableParent && !scrollableParent.scrollWidth) {
        scrollableParent = scrollableParent.parentNode;
      }

      // If a scrollable parent is found, scroll it
      if (scrollableParent) {
        scrollableParent.scrollLeft += event.deltaX;
      }
    }
  }
}, { passive: false });

still the same manifest.json but for this content.js, instead of holding the Shift key to activate the side scrolling in the Tab bar area, I changed it to a mouse hover event where if the mouse cursor hovers in the sheet tab bar area at the bottom of google sheets, it automatically activates the side scrolling and deactivates once the mouse cursor isn't hovering the sheet tab bar area anymore.

it works fine so far after testing but I still cannot find any way to deactivate this little arrow just specifically on google sheets. it still does this when it's on the leftmost or rightmost of the Sheet Tab Bar area and doing the two finger swipe gesture. but it's not working anymore once it's in the cells area so I guest it's a win now that it's working fine for me haha

yowhenyow

this issue is back after the update 7.1.3570.39. it was fine for some time after some updates but the side scrolling is back when side scrolling through sheets

ryofurue

@yowhenyow I hope you will submit a bug report to Vivaldi team about this if you haven't done so yet. I'm suffering from the problem and I suppose anybody who uses Google Sheets on Vivaldi on Mac too.

yowhenyow

@ryofurue Hi thanks I'm not the only one lol. I just submitted a bug report about this. but for now, you can use the script I made with chatgpt above using tampermonkey. it still works properly and I'm using it currently.

Droppi

@yowhenyow Thank you very much! You removed a big pain in my ass

ryofurue

@yowhenyow said in MacOS System trackpad gestures overrides Google Sheets' two finger side scrolling using the trackpad:

I just submitted a bug report about this.

In the last Vivaldi Snapshot Blog, you find this

[macOS] Scrolling on Google sheets triggers history swipe (VB-113010)

Does this mean your bug report has been addressed within two weeks!?

I've tested Google Sheets now. I confirm that the two-finger horizontal wipe doesn't trigger browser history now.