Html Question posted in
Some basic documentation can be found here.

HTML Input Disable Scroll

I have a readonly input. And there is a long value inside. I have overflow-x: hidden; on it but i still can scroll in mobile devices. I don’t want this behavior. How can i disable input scroll ? Thanks for help.

CodeSandbox :

https://codesandbox.io/p/sandbox/react-select-blur-onchange-forked-5lt4y5?file=%2Fsrc%2FApp.js

For Get Same Behavior :

Open Sandbox, Inspect page, open mobile view, hold on input and its scrollable.

Simple Code Example :

<div style={{ width: "200px" }}>
      <input
        style={{
          overflowX: "hidden",
        }}
        value=" TEST TTESTEST TEST TEST TEST TEST"
      />
</div>
Tags:

2

Answers


  1. 0

    I think that this is what you’re trying to achieve

    <div style={{ width: '200px' }}>
    <input disabled
        style={{ pointerEvents: 'none' }}
        value=" TEST TTESTEST TEST TEST TEST TEST"
    />
</div>
    Login or Signup to reply.
  2. 0

    Since the input is disabled, you can add pointer-events property in your CSS to prevent it from being focusable

    input{
 pointer-events: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search