[
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)
