How to disable scrolling when user tries to choose a color with color picker?

Question

I have a Scrollable area (by Radix UI) and a color picker (Chrome picker from React Color) in it.

When the user tries to pick a color on a mobile phone, the screen scrolls with his/her gestures. Thats not ideal while choosing a color; it results in bad UX. Therefore I would like to disable scrolling while choosing a color.

Answer 1

You can add custom css to target the scroll bar inside of the color picker

For example:

.colorPicker > .scrollBar {
     overflow-y: hidden !important; // vertical scroll
     overflow-x: hidden !important; // horizontal scroll
}