Cordova/Phonegap – Native style (rubber banding) Scrolling – iOS 11+

问题内容:

I have taken over development of a production app created in Cordova (Phonegap). I am currently trying to make the app more ‘native’ as in creating a more native looking style and am trying to start off with the ‘rubber-band’ style scrolling as common in most native applications. I understand that ionic has all this built in but I am not familiar with Angular nor do i want to convert the whole app to ionic.

Below is a link to a GIF of the expected outcome (demo ionic view app):
https://imgur.com/a/I804d

By editing the config.xml to

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

the rubber banding exists but affects the whole app, including the status bar and background, making it look even more like a typical hybrid app. I have tried appending CSS positions to the css making the status bar fixed and everything else normal with no success.

I have also tried a few plugins namely ‘iscroll.js’ and ‘bouncefix.js’ following their guides but still nothing seems to work. It seems either to be static or over elastic.

I have browsed through Stack overflow already to try and find a solution, but no modern working one exists. If there is a plugin or javascript fix which could make this possible on Cordova 4.5+ without the use of Angular and Ionic then that would answer my question.

Due to the nature of the app, i can’t post large code samples but hopefully the above makes sense.

TL;DR

Looking for a way to have elastic scrolling on some but not all elements of a phonegap build cordova app (not ionic). See: https://imgur.com/a/I804d for expected outcome.

问题评论:

1  
Hi pfg, thanks for the comment. Using DisallowOverscroll = false causes the entire document to exhibit rubber band scrolling, I am looking for only affecting specific divs (or wrappers) to rubber band.
– Matthew M
4 mins ago

原文地址:

https://stackoverflow.com/questions/47756640/cordova-phonegap-native-style-rubber-banding-scrolling-ios-11

添加评论

友情链接:蝴蝶教程