Disabling Scroll for a HTML Input Tag

My input field has a long value and is set to readonly. Although I have applied overflow-x: hidden; to it, scrolling is still possible on mobile devices. I want to disable this scroll behavior. Can anyone provide a solution? Thank you for your assistance.

CodeSandbox :

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

To Observe the Behavior:

Visit the provided sandbox link, inspect the page, switch to mobile view, tap and hold on the input field to see that it is scrollable.

Simple Code Example :

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

Answer №1

It seems like this is the solution you're looking for

<div style={{ width: '200px' }}>
    <input disabled
        style={{ pointerEvents: 'none' }}
        value=" TEST TTESTEST TEST TEST TEST TEST"
    />
</div>

Answer №2

When the input field is disabled, you have the option to utilize the pointer-events property in your CSS to make it non-focusable

input{
 pointer-events: none;
}

Answer №3

Applying overflow-x: hidden to a readonly input element on mobile devices may not completely prevent scrolling, but additional CSS can be used to fully disable the scrolling function. One effective approach is to use pointer-events: none on the input, which not only stops scrolling but also eliminates other interactions like text selection.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Selenium is unable to interact with hyperlink buttons in Python

I am currently working on a project where an automated program logs into an account and navigates through various webpages. My current struggle lies in the inability to click on any hyperlink buttons on a specific webpage to progress to the next page. I h ...

pythonhtmlseleniumselenium-webdrivercss-selectors

How to resolve preventDefault issue on else condition during form submission in CoffeeScript on Rails 4

After submitting a form, I have implemented a code to prevent the page from refreshing and perform different actions based on certain conditions. Everything works as expected except for one scenario where the page still refreshes after executing the ELSE c ...

javascriptjqueryruby-on-rails-4coffeescript

How to retrieve client's hostname using Node and Express

How can the client's hostname be retrieved in a Node / Express server? Is there a method similar to req.connection.remoteAddress that can be used to obtain the client's hostname? ...

javascriptnode.jsexpresshostname

Unable to import the Node.js array in the import() file

I have encountered an issue while building an array path for the Router.group function. The parameter passed to Router.group is added to the end of the this.groupPath array, but when I check the array data within an import(), it appears to be empty. What c ...

javascriptarraysnode.jstypescript

Having trouble with the margin for the first/last child in your Next.js and Tailwind CSS setup?

A similar situation arose in relation to this GitHub issue I came across. https://github.com/tailwindlabs/tailwindcss/issues/1930 In the context of Next.js and Tailwind CSS, there seems to be an issue with the First / Last child for margin not functionin ...

next.jstailwind-css

Error message: "When using REACTJS.NET server-side rendering, an issue arises where the object does not have support for the 'forwardRef'

Looking to implement server-side rendering for my REACT components using REACTJS.NET within an ASP.NET project. In the SSR JavaScript file, I am including the SimpleBar component from the simplebar-react package, which is triggering the error message Type ...

reactjsserver-side-renderingreactjs.netsimplebar

Issues with sending empty strings to an API in Vue Js

My code below is designed to update data using a Node Js REST API. The remaining field contains an equation using v-model=remaininginst to calculate and store the result in remaininginst. However, when I check the console.log, I am getting NaN empty data s ...

javascriptvue.js

Transition effects should be applied solely to the foreground text color, not to the background image

Is there a way to specifically apply the css3 transition effect only to the text color? Imagine having a readmore class with a transition effect defined like this: .readmore { colour: red; -webkit-transition: all .3s ease-out; -moz-transition ...

htmlcss

When utilizing narrow resolutions, header letters may overlap each other

As I integrate bootstrap into my website, I've noticed that when the resolution is narrow, my header overlaps. If the header is of a small size, like the typical H1 size, everything looks fine. However, when using a larger size (see CSS below), the is ...

htmlcssfont-size

Discovering the best approach to utilizing Font Awesome 6 with React

Required Packages "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/react-fontawesome": "^0.1.18", "next": " ...

reactjstypescriptfont-awesome

The JQuery File-Upload plugin remains inactive even after a file has been chosen

I am currently working on integrating the JQuery File-Upload plugin (). The issue I'm facing is that it doesn't respond when a file is selected. Here are some potential problems to consider: No errors appear in the Chrome console. Selecting a ...

javascriptjqueryhtmlfile-uploadjquery-file-upload

The CSS Specificity Hierarchy

I am currently facing a dilemma with two CSS classes in my codebase. Despite having a stronger specificity, the second class is not being chosen over the first one. Can anyone shed some light on this issue? The CSS class that is currently being applied is ...

css

How can I handle JSON data that contains undefined values?

Similar Question: Is it possible to parse JSON with special 'undefined' values using JavaScript? I'm curious if there's a way to parse something like javascript JSON.parse('{ "name": undefined}'); that is generated by an API ...

javascriptjsonundefined

Create a recursive CSS style for an angular template and its container

I am struggling with styling CSS inside an ng-container that is used in a tree recursive call to display a tree hierarchy. <ul> <ng-template #recursiveList let-list> <li *ngFor="let item of list" [selected]="isSelected"> <sp ...

cssangularrecursiontree

Customizing HTML Select Elements

Can the HTML Select attribute be customized to have a flatter appearance? Although I can set the border to be 1px solid, the dropdown part still appears 3D and unattractive. ...

htmlcss

What is the best way to test an externally hosted application with Testacular and AngularJS?

I have a Pyramid app running on http://localhost:6543. This app serves the AngularJS app at /. This app utilizes socket.io. The query is: Can I test this application using these tools? In my scenario.js file, I have the following: beforeEach(function( ...

javascriptangularjsjasminekarma-runner

The debounce function seems to be malfunctioning as I attempt to refine search results by typing in the input field

Currently, I am attempting to implement a filter for my search results using debounce lodash. Although the filtering functionality is working, the debounce feature seems to be malfunctioning. Whenever I input text into the search bar, an API call is trigge ...

javascriptreactjsdebouncing

Utilize AxiosAbstraction to transmit a Patch request from a Vue.js application to a PHP backend

I need help with sending a PATCH request to update the birthdate of a user (promotor) from Vue.js frontend to PHP backend. The issue I'm facing is that the new date of birth is not getting saved in the database, and the existing date of birth in the d ...

javascriptphpvue.jsdbeaver

How can TypeScript rules be incorporated into a Next.js project without compromising next/core-web-vitals?

In my current NextJS project which is in typescript, I have the following configuration in my .eslintrc.json: { "extends": "next/core-web-vitals" } Now, I want to include additional typescript rules, such as enforcing the rule of n ...

javascriptreactjstypescriptnext.jseslint

Sending a json array from PHP

I spent several hours searching for solutions to my problem but couldn't find an answer. I'm trying to perform a search on the same page using jQuery, AJAX, and PHP. Unfortunately, the array from PHP is still returning undefined. Here is the P ...

javascriptphpjqueryjsonajax