CODEWITHSUNDEEP
javascripthtmlcssreactjs
C.V.Alkan
C.V.Alkan

Reputation: 99

Is there any way to prohibit the screen from scrolling when moving input type=range?

When you move input type=range, which is placed vertically, the screen scrolls with it.
Is there any way to prohibit the scrolling when moving input?

enter image description here

I have prepared a demo.
You can check this issue by sizing the screen for mobile devices in the Developer Tools.
Demo code

Upvotes: 1

Views: 779

Answers (1)

Liftoff
Liftoff

Reputation: 25392

You're looking for CSS touch-action: none, which should be placed on the element you wish to interact with without scrolling the view (in this case, the input).

      <input
        type="range"
        onChange={changeInput}
        style={{ transform: "rotate(90deg)", "touch-action": "none" }}
      />

Here's your code updated with this change.

Upvotes: 5

Related Questions