Mailing-List: contact issues-help@cordova.apache.org; run by ezmlm
Precedence: bulk
Reply-To: dev@cordova.apache.org
Date: Tue, 11 Mar 2014 23:29:43 +0000 (UTC)
From: "Dan Polivy (JIRA)" <jira@apache.org>
To: issues@cordova.apache.org
Message-ID: <JIRA.12700850.1394579550356.47908.1394580583129@arcas>
In-Reply-To: <JIRA.12700850.1394579550356@arcas>
References: <JIRA.12700850.1394579550356@arcas>
Subject: [jira] [Updated] (CB-6231) Better approach for preventing
 rubberband in Windows Phone 8
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit


     [ https://issues.apache.org/jira/browse/CB-6231?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Dan Polivy updated CB-6231:
---------------------------

    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|http://stackoverflow.com/questions/21652548/bouncing-when-overflow-set-to-auto-or-scroll-in-wp8-webbrowser-control], 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').

{code:title=BrowserMouseHelper.cs|borderStyle=solid}
            // 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;
            }
{code}

{code:title=.js file|borderStyle=solid}
// 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();
};
{code}

  was:
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|http://stackoverflow.com/questions/21652548/bouncing-when-overflow-set-to-auto-or-scroll-in-wp8-webbrowser-control], 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').

{code:title=BrowserMouseHelper.cs|borderStyle=solid}
            // This goes in the Border_ManipulationDelta event handler
            var allowScroll = _browser.InvokeScript("eval", new string[] { "(function(delta) { return isScrollingAllowed(delta); })(" + e.DeltaManipulation.Translation.Y.ToString() + ")" }) as string;
            if (allowScroll == "false")
            {
                e.Handled = true;
            }
{code}

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

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


> Better approach for preventing rubberband in Windows Phone 8
> ------------------------------------------------------------
>
>                 Key: CB-6231
>                 URL: https://issues.apache.org/jira/browse/CB-6231
>             Project: Apache Cordova
>          Issue Type: Improvement
>          Components: WP8
>    Affects Versions: 3.4.0
>            Reporter: Dan Polivy
>            Assignee: Jesse MacFadyen
>            Priority: Minor
>              Labels: scrolling
>
> 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|http://stackoverflow.com/questions/21652548/bouncing-when-overflow-set-to-auto-or-scroll-in-wp8-webbrowser-control], 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').
> {code:title=BrowserMouseHelper.cs|borderStyle=solid}
>             // 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;
>             }
> {code}
> {code:title=.js file|borderStyle=solid}
> // 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();
> };
> {code}


--
This message was sent by Atlassian JIRA
(v6.2#6252)