Scrollbar is not Clickable

Overview of the problem

I’m using react-rnd version [10.1.10]

My browser is: Chrome (83.0.4103.116)

I am sure this issue is not a duplicate?

Reproduced project

https://codesandbox.io/s/confident-hill-oee4i

Description

The scrollbar is not clickable when overflow is auto

Although it’s visible

and its style change when we hover over it

we can’t click on it

Steps to Reproduce

1. Go to https://codesandbox.io/s/confident-hill-oee4i
2. Try to scroll by clicking on the scrollbar
3. Moving the style into the <Rnd /> component doesn’t fix it

Expected behavior

For the content to scroll when the scrollbar buttons and bar are clicked

Actual behavior

Nothing happens, although the DOM indicates that the dragging starts by adding the react-draggable-dragging class to the draggable component

[SantiMe1]

To whomever is still struggling with this in 2022:) As mentioned above, listen to the mousedown event in the container that has scrollbars. Check if the click happened in the scrollbar space and stop it from propagating.

const isScrollbarClicked = (e: MouseEvent<HTMLElement>): boolean => {
  const target = e.target as Element
  return (
    e.nativeEvent.offsetX > target.clientWidth ||
    e.nativeEvent.offsetY > target.clientHeight
  )
}

...
if (isScrollbarClicked(ev)) ev.stopPropagation()

This fix won’t work on Mac, since there’s no reserved space for scrollbars there.

[sirajabbas]

Cancel prop resolves the drag conflicts.

cancel="button, svg, textarea, .targetClass etc..."