Can't grab vertical scrollbar

1

Hi there folks!

Please, check this example: Edit fiddle - JSFiddle - Code Playground
And this screen record: screencast-jsfiddle.net-2022.06.02-09_55_49 - Nimbus Capture

As you might see - I am not able to grab vertical scrollbar. I think that is related to codemirror setting ‘pointer-events: none’ to ‘.CodeMirror-vscrollbar’ element. That looks like some bug to me. Is there any workaround to fix this?

Thanks in advance!

2

Pointer events should only be disabled on scrollbars when the native scrollbars are detected to be zero-width. Which browser and platform are you using?

3

macOS Mojave (10.14.6)
Google Chrome 102.0.5005.61
codemirror 5.65.5

4

Looks like the problem might be somewhere here:

  NativeScrollbars.prototype.enableZeroWidthBar = function (bar, delay, type) {
    bar.style.pointerEvents = "auto";
    function maybeDisable() {
      // To find out whether the scrollbar is still visible, we
      // check whether the element under the pixel in the bottom
      // right corner of the scrollbar box is the scrollbar box
      // itself (when the bar is still visible) or its filler child
      // (when the bar is hidden). If it is still visible, we keep
      // it enabled, if it's hidden, we disable pointer events.
      var box = bar.getBoundingClientRect();
      var elt = type == "vert" ? document.elementFromPoint(box.right - 1, (box.top + box.bottom) / 2)
          : document.elementFromPoint((box.right + box.left) / 2, box.bottom - 1);
      if (elt != bar) { bar.style.pointerEvents = "none"; }
      else { delay.set(1000, maybeDisable); }
    }
    delay.set(1000, maybeDisable);
  };

I can’t say I got deep into this code, but from quick glance it looks as this code doesn’t actually test for “filler child” like it says in the commentary. In my case, “elt” is exactly that “filler child” element (<div style="min-width: 1px; height: 382px;"></div>) from inside “.CodeMirror-vscrollbar” element, while “bar” is “.CodeMirror-vscrollbar” element itself. So “(elt != bar)” condition is true, and pointer events are set to “none”.

5

This code hides the zero-width bar from the mouse when it is inactive. The bug appears to be that it remains visible when it shouldn’t. It seems Chrome 102 has a regression where setting pointer-events somehow prevents the regular fade-out-and-hide of the scrollbar from happening.

6

Ah, now I see what you mean. .CodeMirror-vscrollbar has ‘display: block’ together with ‘pointer-events: none’. While it should be the other way around (‘display: block’ → ‘pointer-events: auto’ and ‘display: none’ → ‘pointer-events: none’).
Any advice on what I can do about it?

7

No, that’s not what I mean. I mean that the native ‘fading out’ of the scrollbar is somehow interrupted when the library sets pointer-events to none (which is done because we don’t want a faded-out scrollbar to capture mouse events). This is a Chrome bug, possibly related to this issue which also turned up in Chrome 102.

This patch uses visibility: hidden to force the bars to disappear after they’ve faded out, which seems to avoid the problem.

1 Like
8

marijn thank you very much for explaining all that to me! You saved my day man!