[CB-6231] Better approach for preventing rubberband in Windows Phone 8

• Type: Improvement
• Status: Closed
• Priority: Minor
• Resolution: Fixed
• Affects Version/s: 3.4.0
• Fix Version/s: 3.7.0
• Component/s: cordova-wp8 (DEPRECATED)
• Labels: scrolling
• Assignee: Jesse MacFadyen
• Reporter: Dan Polivy
• Created: 11/Mar/14 23:12
• Updated: 23/Aug/18 06:57
• Resolved: 29/Sep/14 23:53

Description

I've been looking for a good solution for the "DisallowOverscroll" setting that works on Windows Phone 8; I've tried the this.CordovaView.DisableBouncyScrolling setting, but it has the side effect of making "intended" scrolling feel really sluggish, because it only responds to swipes and doesn't track real-time under one's finger.

Using this approach, I came up with an alternate implementation that works in the same scenarios as DisableBouncyScrolling, but feels a lot nicer. Note that with both implementations, if inertia causes the scrolling to hit the top or bottom, you still get a small bounce – I don't think there's any way to avoid that on WP8 at the moment.

I thought I'd share it here, in case you'd like to add it as another option in the WP8 Cordova implementation. I'm happy to attempt a pull request if you'd like (just not sure the best place for the JS code to live if it's part of the 'system').

BrowserMouseHelper.cs

            // This goes in the Border_ManipulationDelta event handler
            var preventScroll = _browser.InvokeScript("eval", new string[] { "(function(delta) { return isScrollingPrevented(delta); })(" + e.DeltaManipulation.Translation.Y.ToString() + ")" }) as string;
            if (preventScroll == "true")
            {
                e.Handled = true;
            }

.js file

// This goes in a JS file that's part of the app; I'm using jQuery, but it can be written without that dependency
isScrollingPrevented = function(delta) {
	var scrollTop = $(document).scrollTop(),
		top = scrollTop === 0,
		bottom = scrollTop + $(window).height() === $(document).height();

	return ((top && delta > 0) || (bottom && delta < 0)).toString();
};