Prevent bouncing effect in Cordova/Phonegap specifically for the header and footer sections

I've utilized the property in the config.xml file to prevent bouncing in the webview (iOS):

<preference name="DisallowOverscroll" value="true" />

It's working as intended. However, I'm wondering if there's a way to disable bouncing for just my header and footer. These elements are fixed at the top and bottom of my app, so I don't want them to bounce. Yet, I'd like to maintain the bounce effect for the inner container for a more native feel, especially with lists.

  • Is there a method to achieve this? I want to prevent bouncing for my header and footer, but not for the inner container.
  • Additionally, is there a way to do this that will work across both iOS and Android platforms?
androidhtmlioscsscordova

Answer №1

Continue using

<preference name="DisallowOverscroll" value="true" />

Include the following code in your CSS for the scrollable wrapper: 

-webkit-overflow-scrolling: touch;

This will add a bouncing effect to the scrollable content.

Apply overflow: hidden to your header and footer to prevent scrolling, and overflow:scroll to your content along with the css webkit scrolling touch.

Check out the LIVE DEMO on JSFiddle here: http://jsfiddle.net/mPfeQ/

Note: Test this feature on a mobile device (it may not work on a computer)

Answer №2

Hey there! To make a list or scrollable element scrollable, just apply the following CSS rules:

  overflow: scroll;
  -webkit-overflow-scrolling: touch;

-webkit-overflow-scrolling: touch; adds a bounce effect to the scrolling area, giving it a native look.

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

How to modify the styling of an input element in React without directly manipulating the input itself

I have collected responses from a survey I created and now I want to showcase the results. The responses are rated on a scale from 1 to 5, and I would like to display them similar to the screenshot. Each number should be presented within a square, with ...

cssreactjsinput

Executing the SQL query more than once is not permitted

I seem to be facing a challenge in executing SQL queries multiple times. In the given code snippet, the first SQL query 【SELECT h.title, h.place, h.introduction ~】works fine. However, the second one 【SELECT name ~】fails to execute. If I comment ...

phphtmlcss

Leverage the Google Drive API for the storage of app-specific data

I'm currently developing a JavaScript application that runs on the client side and need to store a JSON object containing configuration details in a Google Drive Appdata file. Through the Google Drive API, I can successfully check for the file within ...

javascriptjqueryhtmlgoogle-drive-api

Typekit compatibility with Internet Explorer 11

After dedicating months to a project, everything seemed to be running smoothly until one client consistently pointed out font discrepancies in the screenshots. I attributed this to a possible browser issue but soon discovered that the entire network had sp ...

cssinternet-explorertypekit

Manipulating CSS animations through JQuery

Currently, my animation is triggered by a :hover event. However, I would like to change it so that the animation starts when a button is clicked. Can someone guide me on how to manipulate the CSS using JQuery? //CSS .mouth{ top: 268px; left: 273px; ...

javascriptjquerycss

Styling for the DataTable disappears upon loading jQuery

my PHP file named "zero3data.php" <?php printf('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">'); printf('<thead>'); printf('<tr>'); ...

javascriptcss

Counter for the type="range" HTML input

I recently read an article discussing the possibilities of displaying ticks in Chrome and Firefox for a number input with the type "range". I was intrigued to find out more about this feature and came across a helpful discussion on Stack Overflow. ...

htmlcss

Ways to generate multiple elements using JavaScript

Is there a way to dynamically freeze columns in a table as I scroll it horizontally? I've achieved this statically using JavaScript, but is there a way to indicate the number of columns and achieve the desired style? This is what my JavaScript code c ...

javascripthtmlcssdom

Verify the scheduled time for a PendingIntent within the AlarmManager

Can the Android AlarmManager be queried for the time of the next alarm for a given PendingIntent? I am aware that an alarm can be canceled using the .cancel(PendingIntent) function and updated using .set(), but is there a way to check the scheduled time? C ...

javaandroidalarmmanager

Is the Ngx-bootstrap popover automatic positioning malfunctioning when placed on the right side of the screen?

I am currently facing an issue while implementing popovers on our application using Angular 6.0.1, Ngx-bootstrap 2.0.5, and Bootstrap 4.1.1. The problem arises when I use 'auto' positioning for the popovers, specifically on the right side of the ...

cssangularbootstrap-4popoverngx-bootstrap

APNS functionality is supported by APN providers, but it is not compatible with NodeJS in a production

I've set up a nodeJS script to send APNs. In development, it always works flawlessly. However, when I switch to production, the notifications never go through. Oddly enough, when I use the same notification ID with my production certificate in Easy Ap ...

javascriptiosnode.jsapple-push-notifications

The index "visible" in $_POST has been flagged as not defined

I am currently developing a PHP project and have a form that needs to be submitted. The form code is as follows: <h2>Create Subject</h2> <form action="create_subject.php" method="post"> <p>Subject name: <inp ...

phphtmlformsvalidationundefined-index

make changes to the current selection in the drop-down menu

Imagine I have a select list with 3 options: <select> <option>1</option> <option>2</option> <option>3</option> </select> My goal is to create a textfield and button that will allow me to upd ...

javascripthtml

What could be causing my div to display a horizontal scrollbar in Firefox?

Here's a straightforward test scenario: <html> <body> <div style="border:2px solid black; overflow: auto;"> x </div> </body> </html> Upon rendering, a horizontal scrollbar appears! I was using F ...

htmlcsslinuxfirefox

Place the <span> element at the bottom of the <ul> list

Struggling to align the captions of an image carousel at the bottom of the <ul>. No matter what I try, it just doesn't look right. Check out my Fiddle here Below is the HTML structure: <div class="carousel"> <ul> <l ...

htmlcss

Trouble with setting HTML table width

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <table border="1" width="100%"> <tr> <td>bbbbbbbbbbbbbbbbbbbbbbbbbbb ...

htmlcsswidthhtml-table

Scrolling through four limited list items automatically

Hey there! I am currently working on a design project. You can check it out here. I'm trying to replicate a section from another site, which you can see here. <div class="latest-winners-container"> <h3 class="header">Latest Winners< ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for sending multiple values in a data object using jQuery AJAX

I am currently working on a form that contains two input fields, with the possibility of more being added later. The first input is a text field and the second is a checkbox. I want to be able to send these inputs using $.ajax. To accomplish this, I have ...

javascriptjqueryhtmlajax

Angular-ui-bootstrap-tabs feature smooth transitions when switching between tabs, but lacks animation when moving

Just made some updates to an example by user @austin Encountering an issue when trying to transition backwards (from tab3 to tab2), but it works fine when transitioning forward. I'm not sure what I'm missing here, so any help would be appreciate ...

cssangularjsangular-ui-bootstrapangular-ui-bootstrap-tab

Leveraging JSON in a pickerview to dynamically update options

I am fairly new to Xcode and Obj-C programming, so please bear with me as I try to figure things out. After browsing through this site and others, I was able to put together a pickerview with two components. Upon selecting an option in the first component ...

iosjsonuipickerview