[Request] Option to remove body class
trouba opened this issue · comments
Hello,
I was wondering if it was possible to remove the indiana-dragging class with an option, or if this options could be added as a prop ?
I'm setting a grab/grabbing cursor on the element I use the library on (a canvas element) but I have difficulties to override the .indiana-dragging on the body
(using version 2.01)
@trouba, it's strange. Could you provide the screenshot of current body styles in the developer tools?
@Norserium Here it is:
And what's problem? You can redefine the cursor to cursor: auto
in your class.
The problem is I'm using the library on a canvas element in a react component. I don't want the body to have a grab cursor, only the element I'm working with.
I tried to remove the indiana-dragging class from the body (in onStartScroll) but it falls back to auto, and takes priority over the canvas cursor while dragging.
I could probably find a way to override this but I would prefer not to:
- have to remove a class from the body
- have to set the cursor on the body manually each time the dragging state changes
- have to add css to the body since i'm using this in an isolated component
The best way for this would be to have an option to remove this class if it's only purpose is to add cursor: grab
I could open a PR if you'd like
I still don't get, why cursor: auto
doesn't solve your problem? Child element cursor
property should have the bigger priority. The example.
@Norserium thanks for your feedback, I made 2 minimal reproduction pens so you can see my issue:
Using .indiana-dragging { cursor: auto; }
https://codepen.io/trouba/pen/yLgmaay
🚫 Cursor switches back to default when dragging, despite the cursor being "grabbing" on the canvas element
Using .indiana-dragging { cursor: grabbing !important; }
https://codepen.io/trouba/pen/bGgXwWy
✅ Cursor is ok
The second one kinda fix my issue but i'd rather not have this class. Maybe I'm missing something here ?
@trouba, actually, the setting of cursor in body
is not the problem. The problem is that child elements of the scroll container has pointer-events: none
while dragging, so their cursor
property just ignored. You can apply cursor to the whole container to bypass this issue.
There are also questions to your code. For example, why do you access to elements via DOM API and not by refs? Why do you set the style instead of adding class (container--grab
, container--grabbing
)? In this case autoprefixer
will do some job for you.
Perhaps, you did it only to make example faster. If so, there are no questions.
@Norserium Thank you , setting the cursor on the scroll container fixes everything
You are welcome!