CODEWITHSUNDEEP
javascriptiphoneangularjsscrollangularjs-directive
Marc Canals Giraut
Marc Canals Giraut

Reputation: 354

Disable elastic scroll in the ng-view, but not in the subview of ng-include

I'm developing a web app with angularjs, with 2 levels of navigation:

1st level: Main navigation using ng-view.

2nd level: SubView navigation with the top and bottom bars using ng-include.

I posted more details in another question: History back navigation using ng-include

When I use the app in the iphone I have the elastic scroll in both views, main and partial. How can I disable the elastic behavior in the main view, but not in the partial view of the ng-include?

I tried using the next code, but it disable both views.

document.addEventListener('touchmove',  function(e) {
    e.preventDefault();
    },
false
);

Thanks in advance!

Upvotes: 2

Views: 567

Answers (2)

Marc Canals Giraut
Marc Canals Giraut

Reputation: 354

I'm using phonegap... so I finally fixed my problem using this setting in the config.xml:

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

More information in this link: https://build.phonegap.com/docs/config-xml

Upvotes: 1

doublekid
doublekid

Reputation: 46

If you're not using a library like iscroll for scrolling, you should be able to solve this issue by using CSS and perhaps rearranging your HTML a bit.

From what I understand you have are using your ng-view as a sort of container element, and inside it are the header, footer and content elements.

Assuming this is correct, try giving the container element position: fixed; and set top, right, bottom and left all to 0. set overflow to hidden.

Give the content element fixed position as well, but with top = height of header and bottom = height of footer. Then give it an overflow-y: scroll;.

This is, of course, contingent on your header and footer both being static heights.

Upvotes: 1

Related Questions