Holy, moly! This issue has been chasing me for more than 3 years! I’ve always been a passionate Cordova/PhoneGap developer, even if many people don’t like it: I personally think it’s not a bad platform if you got experience and you know what you’re doing.
However, since apps built with Cordova/PhoneGap completely rely on webkit and html, scrolling usually feels a little slow which is the reason why many people use a trick: They blow up a div element to 100% width and height and use -webkit-overflow-scrolling:touch to get smooth momentum scrolling within the div.
Now, this works pretty good but the tradeoff is that you loose the ability to easily scroll up in your app by simply tapping the status bar on the top of the screen in iOS. This is a big usability issue and needs to be fixed imho.
So, here’s the fix:
First, you need to install this plugin: cordova-plugin-statusbar
You can do so by simply opening terminal, cd to your project folder an run:
cordova plugin add cordova-plugin-statusbar
This plugin will fire an event when status bar is tapped. You need to listen to this event in JavaScript:
document.addEventListener("deviceready", function () {
window.addEventListener("statusTap", function () {
scrollUp(); // Now, let's implement this, shall we? :D
});
}, false);
You’re almost there! You only need to programmatically scroll up your container. Let’s assume the container you’re scrolling on and which you applied -webkit-overflow-scrolling:touch on has id “wrapper“.
Lots of stuff here to scroll..
So what you want to do is:
var isScrollingUp = false,
scrollTime = 700; // Adjust scroll speed here. Lower = faster. Higher = slower.
function scrollUp () {
if (!isScrollingUp){
var $curpage = $('#wrapper'),
curpage = $curpage.get(0);
curpage.style.overflow = 'hidden';
isScrollingUp = true;
$curpage.animate({scrollTop: 0}, scrollTime);
setTimeout(function () {
isScrollingUp = false;
}, scrollTime + 1);
$timeout(function () {
curpage.style.overflow = '';
}, 10);
}
}
I know the code ain’t pretty because of all the weird timeout stuff but it magically just works.
Important
I stripped this code snipped off a project of mine and had to do some modifications for this blog post, so I don’t know if everything still works, so please let me know if this did work for you or not.
dear
I have done the same but the event is not firing. ?
am I missing some thing.
document.addEventListener(“deviceready”, onDeviceReady, false);
function onDeviceReady() {
try {
console.log(“device is ready!!!”);
document.addEventListener(“statusTap”, onStatusTap, false);
console.log(cordova.file);
}
catch (e) {
console.log(e);
}
}
function onStatusTap() {
try {
console.log(“tap is ready!!!”);
scrollUp();
}
catch (e) {
console.log(e);
}
}
@jamil Well, your code looks different to mine. I use
window.addEventListener("statusTap", onStatusTap)and you calldocument.addEventListener("statusTap", onStatusTap, false);