Search code examples
htmlcssscrollstylus-pen

Scrollbar direction inverted when using a stylus in Chrome

Scrollbars generated by CSS-"overflow" work as usual with the mouse but work in an inverted direction when using a stylus. With a stylus, the handle of such a scrollbar cannot be dragged at all. This happens even with scrollbars of Chrome's developer tools itself (console, source code, etc.). And it happens in Edge as well (and in its developer tools), with a Wacom pen display and on a notebook computer with N-Trig stylus (Windows 10, newest Chrome and Edge, newest Wacom driver).

On the track of the scrollbar, the stylus seems to drag the document, just as though it was placed on the document and not on the scrollbar. On the scrollbar's handle this would counteract the handle's regular motion; that could explain why the handle does not move.

Is there a way to change that behavior?

Here is a minimal demonstration:

<!DOCTYPE html>
<html>
<head>
  <style>
    .a {
      display: block;
      width: 200px;
      height: 200px;
      overflow: scroll;
    }
    .b {
      width: 500px;
      height: 500px;
    }
  </style>
</head>
<body>
  <div class="a">
    <div class="b">
      <p>abc</p>
    </div>
  </div>
</body>
</html>
Solution

  • I can reproduce your problem with the Chrome browser with a Wacom PTH-650 digitizer on Windows 11. This problem doesn't occur in Firefox.

    The problem probably stems from an interaction between Chrome and Microsoft's Windows Ink. Windows has it's own system for supporting pens and by default Wacom tablets redirect their input to this system.

    You can however switch off Windows Ink For Chrome. This is how to do that:

    • Make sure Chrome is running.
    • Go to the Wacom Tablet Properties panel. Select your tablet and pen.
    • Next to the "Applications" row, press on the "+" button and select Chrome. You should now see Chrome separately in the applications.
    • Make sure Chrome is selected in the applications row.
    • Go to the "Mapping" tab and unselect the "Use Windows Ink" at the bottom.

    Now test the scrolling in Chrome. Did it help?

    The reason you shouldn't untick Windows Ink for all applications is because in most modern applications something like pressure sensitivity relies only on Windows Ink and doesn't connect directly to the Wacom driver anymore.

    enter image description here