iOS Webapp: Prevent scrolling on page with the exception of the textarea

I am in the process of developing a web application for iOS. My goal is to make it non-scrollable, except for a textarea that should be scrollable. I have searched for solutions to similar issues, such as this one disable enter key on page, but NOT in textarea, but unfortunately, I did not find success (this example seemed promising, but I encountered a "can't find variable node" error in Safari).

If anyone has any suggestions or can assist with solving this problem, I would greatly appreciate it. Thank you.

Although it did not completely solve my issue, I found the answer marked as the best helpful.

javascriptiosweb-applicationsscroll

Answer №1

To detect if a user is attempting to scroll on a mobile device, you can check for one finger moving on the screen and then utilize an onTouchMove event listener to suppress default actions and propagation.

var textareaElement = document.getElementById("textarea");
textareaElement.addEventListener("touchmove", function(e){onTouchMove(e)}, false);

function onTouchMove(e) {

    if (e.touches.length != 1) return;

    e.stopPropagation();
    e.preventDefault();

}

Navigating scrolling behavior on iDevices can be tricky, especially when it involves inner elements with scroll effects in mind.

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

ScrollReveal.js won't function as intended

https://i.stack.imgur.com/SOQEk.png Looking to utilize the popular ScrollReveal.js created by Julian Lloyd (ScrollReveal) Despite following instructions from various sources, the script is not producing the intended effect. Steps taken to make it work: ...

javascriptcss

How can I incorporate multiple states into a conditional statement in ReactJS?

Is there a more efficient way to achieve this task? I'm struggling to come up with a cleaner solution as the current approach looks messy. I need to check multiple states in an if statement and the only method I can think of right now is the one prese ...

javascriptreactjs

When the DOM elements have already been rendered, document.querySelector() will return null

I have been working on creating an automated Puppeteer script to download my monthly bank transactions from the bank's website. However, I have encountered a strange error (refer to the attached Imgur link for images of this issue) https://i.sstatic ...

javascriptseleniumdomscreen-scrapingpuppeteer

I am facing difficulty in accessing the response with angular when using multer

I am utilizing Multer for uploading photos. My backend technology is Node, and I have managed to successfully upload the image. However, upon uploading the image and receiving the response back in Angular via json, all I see in the console log is [object O ...

javascriptangularjsmulter

What is the best way to store the input value within a variable?

I am developing a new component that includes an input field and a button. The user is required to enter their nickname in the input field. This nickname, captured as the input value, needs to be stored in a variable. This variable is integral to a functio ...

javascriptreactjsnext.js

Launch a new pop-up window with a specific size to display the form

I need to implement functionality for a Submit button on my new form that passes parameters to another page and opens a new pop-up window sized to specific dimensions. I already have this working with a hyperlink, but now I need the same functionality fo ...

javascripthtmlformssubmit

What is the process for expanding nodes in jstree with an array of identifiers?

I have been utilizing the jstree javascript plugin for loading data asynchronously. An essential feature I am working on is implementing search functionality for the tree's data. The process involves a web service that provides an array of ids followi ...

javascriptjstree

Setting up AngularJS can be a pain

Greetings, my name is Rahim. While setting up AngularCLI, I ran into the following issue: 'ng' is not recognized as an internal or external command, operable program or batch file. C:\Users\ASUS ROG>ng --version 'ng' is ...

javascriptnode.jsangular

Problem involving non-breaking spaces

After changing the font-family of my website from Gotham Pro to Gotham, I encountered an issue with the styling of numbers that were formatted using my currency formatter function. Strangely, when the &nbsp character is removed, everything appears to b ...

javascripthtmlcssreactjs

When a div is created outside of the viewport, the overflow scroll feature will fail to function properly

I am currently working on developing a full screen slider with a unique feature on the last slide: a horizontal scrolling area. To achieve a smooth animation, I am using CSS translations to bring the div within the viewport. Oddly enough, the scrollbar do ...

javascripthtmlcssscrolltransition

What is the best way to transfer the JWT token from the server to the client using an HTTP header?

I have been searching for an answer on how to pass the JWT Token from the client to the server securely, but I am not satisfied with the explanations I found. Everyone talks about the most secure way to transfer the JWT token using HTTP headers instead of ...

javascriptexpressjwthttp-headersauthorization

Display all images in a dynamic jQuery gallery popup

I am looking to create a dynamic model popup, so I have written the following JavaScript code. However, when I click on a single image, the model popup shows all images' content in a dynamically created div. I want the same image and its content to ap ...

javascriptjqueryangularjsasp.net-mvctwitter-bootstrap

I'm looking to merge the functionality of AngularJS confirm with SweetAlert (Swal)

I am currently working on a project and I need to implement a confirmation prompt for the logout functionality. I want to use Sweet Alert for this purpose. While I have found solutions for both the confirmation and Sweet Alert separately, I am struggling t ...

javascriptjqueryangularjssweetalert

forming a collection of NSObject categories

In my NSObject class, I am passing a NSDictionary object and setting all the entries in the dictionary to their respective variables within the NSObject class. After that, I'm attempting to add this NSObject class to its own NSMutableArray, but unfor ...

objective-cioscocoa-touchnsarray

Leveraging the power of Redis client within an Express router

I would like to incorporate the use of a redis client in specific endpoints of my application. Here is how my app.js file is currently structured: //app.js const redis = require('redis'); const client = redis.createClient(process.env.REDIS_POR ...

javascriptnode.jsredisrouter

End node.js once and for all

After starting my server using forever start start.js It ran normally. However, when I attempted to stop it with forever stopall The server was removed from forever list as expected Nevertheless, upon running lsof -i tcp:3000, my server still showed u ...

javascriptnode.jsserverforever

problem encountered with data not being received by Java servlet

I am having difficulty sending canned json data to a servlet using jquery ajax on the Google App Engine. Despite catching the call in the debugger and inspecting the request, I consistently find that the parameters map is null... Any assistance would be g ...

javascriptgoogle-app-enginejqueryservlets

What type of technology is typically utilized in creating functional platforms such as goDaddy, wix, and other web design websites?

I am currently working on a web development project that aims to allow users to edit webpages without needing any coding knowledge. Users with authorization will be able to modify not only the text but also various HTML tags on the page, similar to platfor ...

javascriptjavahtml

Issue with altering transparency using a JavaScript while loop

I'm attempting to create a blinking effect for an image by continuously fading it in and out. I've implemented two while loops to adjust the opacity attribute of the element - each loop changing the opacity by 10% and pausing for 10ms. Although t ...

javascriptcss

Showing button based on a particular value

I am trying to dynamically display a button based on the value of the sendSMS property for the logged-in user. I have added this property in the viewer model, which is connected to the user's base model. However, I am encountering difficulties with us ...

javascriptangularjsnode.jsstrongloop