Is there a workaround to prevent me from using overflow: scroll when I addEventListener("touchmove", preventBehavior, false)?

I am developing an iOS app using PhoneGap, and I have encountered a problem where the window cannot be moved due to the code 

document.addEventListener("touchmove", preventBehavior, false);

Although this code prevents the window from moving, it also stops me from using the CSS property overflow:scroll on a specific section of text.

Is there a workaround that allows both functionalities to work together? Can I load the CSS after the JS to override it, or apply the 

document.addEventListener("touchmove", preventBehavior, false);
specifically to the body without affecting its content?

javascriptioscordovaoverflowtouchmove

Answer №1

Discovered an alternative method for phonegap/cordova that eliminates the need for using 

document.addEventListener("touchmove", preventBehavior, false);
initially - simply navigate to your xcode project.. project file > supporting files > cordova.plist then change 'UIWebViewBounce' to NO at the top.

Resource: here

Answer №2

When it comes to detecting the target element during a "touchmove" event, you can use the following code:

document.addEventListener("touchmove", function(event) {

    if (event.target.tagName !== "INPUT") { // Specify the element for which you want to prevent default behavior.

          event.preventDefault();
    }
});

Answer №3

If you want to capture all the scrolling pixels, here are the steps you can take:

document.addEventListener("touchStart", <your method>, true/false)
document.addEventListener("touchMove", <your method>, true/false)
document.addEventListener("touchEnd", <your method>, true/false)

Make sure to add a touchEventListener in the body load function. If you use event.preventDefault(), it will prevent the default behavior of the event, which may be why your overflow:scroll property isn't working as expected.

Answer №4

The recent update involved replacing cordova.plist with config.xml and adjusting the setting

to "UIWebViewBounce" with a value of "false".

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

Django AJAX call for data retrieval

Can someone assist me, please? I'm trying to update content on a page without refreshing when a button is clicked. Currently, my approach involves using the jQuery cookie plugin to save the button's id into a cookie and then reading that value in ...

javascriptpythonajaxdjango

Selecting a event from Google Places Autocomplete using a mouse click

I have successfully implemented Google's autocomplete API as per the documentation. However, I am facing an issue with a form that is submitted via Ajax every time it changes. The problem arises when using the autocomplete feature for location selecti ...

javascriptjqueryajaxformsgoogle-places-api

Enhancing Rails: Tailoring the flash message to suit individual needs

I am embarking on my journey with ruby on rails and could use some guidance with the following scenario. In the application.html.erb file, flash messages are configured to fade out after a few seconds by default. <div id="message" class="modal alert a ...

javascriptjqueryruby-on-rails

Why does the "revalidate" field in Incremental Static Regeneration keep refreshing without considering the specified delay?

I am currently referencing the guidance provided at: https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration. My intention when setting the revalidate: 60 * 10 parameter is: To have the content remain consistent for at least ...

javascriptreactjstypescriptnext.js

Launching the Skeleton feature in NextJS with React integration

I have been working on fetching a set of video links from an Amazon S3 bucket and displaying them in a video player component called HoverVideoPlayer. However, during the loading process, multiple images/videos scale up inside a Tailwind grid component, ca ...

javascriptreactjstypescriptnext.js

transferring information from php to json

Below is my JSON script: // add button .click $('a.add').click(function(){ $('#loader').show(); var url = "/?"+$("form[name='jsms_add']").serialize(); ajx = $.ajax({ url: url, type: 'post&a ...

javascriptphpjqueryjson

The field 'shouldComponentUpdate' cannot be reassigned to itself

I encountered a TypeScript error while using shouldComponentUpdate: The error message states: "Property 'shouldComponentUpdate' in type 'Hello' is not assignable to the same property in base type Component<IProps, any, any>." ...

javascriptreactjstypescript

Ways to terminate a running child process in npm

Within my package.json file, I have a debug script that launches a Node application. This entire NPM script is initiated by a test, and this test must terminate the debug script once it completes. When I use npm run debug and try to kill the process, the ...

javascriptnode.jsnpmkillchild-process

What is causing the check box in the simple_form view to consistently return a value of 1 when checked or unchecked in rails 3.2?

A checkbox with the name "need_delivery" is used to determine whether the next two text boxes should be displayed. These two text boxes are enclosed within a div with the id of task_request_delivery. Below is the code snippet in the simple_form view named ...

javascriptjqueryruby-on-rails-3simple-form

Incorporate Vue into a template using variables and props

Currently in the process of building a vue app and wondering how I can seamlessly integrate it into a template while passing variables (props) into it. When I execute npm run dev, the app and all its components are coded with no issues. After running npm ...

javascriptvue.js

Visualizing JSON data in React.js using Chart.js

Currently, as a beginner in ReactJS, I am working on an application that displays COVID-19 data from a JSON API in a visual format using Chart.js. However, despite trying various solutions, I am unable to visualize the data. Below is my source code: App ...

javascriptreactjs

Deletion of a custom function in JavaScript

I have written some basic code to generate and remove an image using functions. Specifically, I need help with removing the image created by the function Generate() when a button linked to the function Reset1() is clicked. Here's the code snippet for ...

javascripthtmlcss

The click event fails to provide $event upon being clicked

Within my HTML structure in an angular 7 application, I have the following setup: My goal is to trigger the GetContent() function when any text inside the div is clicked. Strangely, when clicking on the actual text, $event captures "Liquidity" correctly. ...

javascripthtmlangular

How to Develop a Custom getText() Function for a Selenium Element?

Creating a custom Selenium getText() method that can retrieve either the node text or the node plus child text of an element is my current challenge. The default behavior of Selenium appears to utilize the Xpath .//string() method which includes the text o ...

javascriptseleniumselenium-webdriverwebdriver

Retrieving data from Firestore yields an empty result

Having trouble reading from Firestore within a function, even though writes are working fine. Despite following examples on the given link, the query below and its variations result in an empty promise: module.exports.customerByPhone = phone => { r ...

javascriptnode.jsfirebasegoogle-cloud-firestoregoogle-cloud-functions

What steps should I follow to obtain code coverage data in my Aurelia application with the help of karma?

After creating my Aurelia app using the Aurelia CLI (au new), I wanted to set up code coverage, preferably with karma-coverage, but was open to other options as well. First, I ran npm install karma-coverage --save-dev and then copied the test.js task over ...

javascriptcode-coveragekarma-coverageaurelia

Converting a Complex Array of Objects into a CSV File for Download in a React Application

My current data is available for download in xls/csv format, but when using the react-csv npm package, the name and description are being displayed in the same column instead of separate columns. I am seeking assistance on how to display the data with Nam ...

javascriptreactjs

Choose a Range of DOM Elements

My challenge is to select a range of DOM elements, starting from element until element. This can be done in jQuery like this: (Source) $('#id').nextUntil('#id2').andSelf().add('#id2') I want to achieve the same using JavaScr ...

javascripthtmlcss

Switch content based on value with Javascript

One of my elements is: <a href="#" type="link" class="button send" classAct="button send" classSel="button send pressed" label="encrypt" title="sendmessage" onclick="add_encryption();">Encrypt</a> When toggled via the JavaScript below, I want ...

javascriptjquerytoggle

Are there any specific steps I should take to ensure that my server can support jQuery.getJSON when using a bookmarklet?

Currently, I am in the process of creating a bookmarklet that will require some user details to be input. After researching my options for cross domain communication, I have found that my best choices are either using jQuery.getJSON or adding a form and i ...

phpjavascriptjquerygetjson