How can you stop the screen scrolling from the top of a Phonegap app?


Tags: css,cordova,scroll,zepto

Problem :

I'm currently using Phonegap to develop. It works fine, except there's a small (~1 pixel) bar along the top, touching which will cause the entire application to scroll, which I don't want. Here's what I'm using to prevent the rest of the app from scrolling:

<div id="container" ontouchstart="stopIt(event, true);" ontouchmove="stopIt(event, true);" ontouchend="stopIt(event, false);">

stopIt = function(event, touching)
{
    event.preventDefailt();
    //Other code
}

And the CSS:

#container {
  width:100%;
  height:100%;
}

Does anyone know what could be causing this, or how to fix it?



Solution :

I think you're talking about the status bar on the top of an iPhone? Yes that will always scroll to the top, and there is no way to catch this event and stop it from the browser.

You'll need to set the web view's scrollToTop attribute as false from the native side. That should work.

[theWebView setScrollsToTop:NO];

    CSS Howto..

    How to make circles repeat in the background of an element in full CSS?

    How to make an element slide with the viewport as it scrolls?

    Applying new css to elements with jQuery, how to add transition?

    How to add css loading animation in ajax beforeopen page

    How can I resize images that are loaded onto a page?

    CSS list styling - how to reduce the distance between parent and children of the previous parent?

    How to apply zoom transition on label and textbox simultaneously in HTML/CSS?

    How to add a sliding div to these CSS Message Bubbles?

    I'm having trouble with Safari and CSS. How do I fix the issue without affecting Chrome?

    Flask - How to use CSS when i'm using Response(stream_template) with generator

    How to offset div columns in CSS grid system

    How to set the CSS content property with a Google Material Icon?

    How to use externel CSS and (static) images in Go, Google App Engine

    How to add a color transitions in CSS and HTML like the one in the login area of the Instagram app?

    How to fix width of DIV that contains floated elements?

    How to change MenuItem focus/hover color

    How to create a 3 section's in a row inside the colophon footer (wordpress)

    HTML CSS How to stop a table to put the content after it on a new line?

    How to prevent one table from obeying CSS rule

    How can you hide CSS from the iPhone, but not other browsers?

    how to create 100% vertical line in css

    How to center my a div in a table using CSS?

    how to select one element in jQuery

    How to target CSS for iPad but exclude Safari 4 desktop using a media query?

    How to hide overflow characters of a div when resizing [duplicate]

    CSS border - how to populate content inside div with border

    How do I get this list to be seperated by a tab? (HTML/CSS)

    How to make a dotted underline link on hover?

    How can I get placeholder text to shrink to fit within its text input element and show its entire value? [duplicate]

    How can I show this 2 div side by side?