Simplebar: Scrollbar interferes with other mouse events (drag content)

[sebam91]

I am using additional plugin together with simplebar that allows you to directly drag scrollable content with mouse (asvd/dragscroll). The problem is that dragging the simplebar scrollbar interferes with mouse movements which are bind on direct content mouse drag and work in opposite direction of scrollbar (like touch). Other way around works fine (mouse dragging content also moves the simplebar scrollbar).

Any suggestions? Does simplebar support any on scrollbar drag events so i can disable mouse dragging gestures specifically for the time when scrollbar is used?

[adjourn]

Would love to help but it's tricky to understand the issue and solve it without seeing it in action. Could you replicate your situation (i.e add drag plugin) to this example?

[Grsmto]

SimpleBar is calling both preventDefault and stopPropagation on all these events: 'mousedown', 'click', 'dblclick', 'touchstart', 'touchend', 'touchmove'. So I would have expect that your other plugin doesn't scroll when you drag the scrollbar. I'm not sure why it's happening as I would think the event does not get propagated.

I looked at asvd/dragscroll and from what I see in the code, this should work fine with SimpleBar so I'm not sure why this is happening.

Are you using the latest version of SimpleBar ([email protected])?

[sebam91]

@Grsmto I updated the fiddle. Try dragging the simplebar, and you will see the opposite effect.

[adjourn]

Here's a hack (demo) in case this issue doesn't get resolved fast/need quick fix:

const simplebar = new SimpleBar(document.getElementById('app'));
removePointerListeners();

function removePointerListeners() {
  ['mousedown', 'click', 'dblclick', 'touchstart', 'touchend', 'touchmove'].forEach((e) => {
    simplebar.el.removeEventListener(e, simplebar.onPointerEvent);
  });
}

It does remove scrollbar/track interactions but it seems to maintain all other functionality.

PS! It could create issues I didn't think about, use at your own risk.

[sebam91]

Is there an option to access simplebar-track or simplebar-scrollbar directly? Not only scrollElement which detects the whole dragging area being scrolled. I'd like to keep functionality of both plugins, and go the other way, which is disabling the _dragscroll_ for the time of scrolling the content with simplebar-scrollbar.

I tried with

$('.simplebar-scrollbar').on('mousedown',function(){
// disable dragscroll
});

but the event is somehow not firing. Maybe i am doing something wrong.

[sebam91]

@asvd can you provide any additional information here?

[adjourn]

Track (and all descendants) has CSS rule pointer-events: none; which seems to be important for this implementation. It means that both are invisible to cursor and touch, therefore don't fire event you tried.

[sebam91]

Track (and all descendants) has CSS rule pointer-events: none; which seems to be important for this implementation. It means that both are invisible for cursor and touch, therefore don't fire event you tried.

Oh yeah, i totally missed that one. 😀

It would be definitely a plus for simplebar to integrate an optional setting to allow mouse dragging the content. 😺

[Grsmto]

Based on @adjourn answer, here is a solution for your problem:

const simplebar = new SimpleBar(document.getElementById('app'));

['mousedown', 'click', 'dblclick', 'touchstart', 'touchend', 'touchmove'].forEach((e) => {
      simplebar.el.removeEventListener(e, sb.onPointerEvent);
      simplebar.el.addEventListener(e, sb.onPointerEvent, true);
    });

It's hacky as you have to use SimpleBar internals functions but there isn't any other way I think. Basically what we do is capturing the event so it doesn't propagate to dragscroll, using the addEventListener 3rd parameter capture to true.

I might eventually set this by default in SimpleBar as otherwise any interactive things positioned under the scrollbar would get triggered...