Webview bounce in windows phone 8

问题

I need to know if there is any way I can control the webview bouncing property in windows 8.I have tried -ms-touch-action: none; it does stop the bouncing but it disables the whole scrolling in the App.

I have tried the following but these doesn't work:-

<meta name="msapplication-tap-highlight" content="no" />



  backface-visibility:hidden;
   -webkit-backface-visibility:hidden;
   overflow: hidden;
   -ms-content-zooming: none;

So please let me know if there is any other methods for controlling the bounce?Any help would be appreciated.Thanks

回答1:

Actually, "overflow: hidden;" works for me. Without it, the webview bounces, and with it the screen stays still whatever I do.

My CSS general section is as follows:

@-ms-viewport {width: device-width;}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

html {
    min-height: 100%;
    position: relative;
}

body {
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-user-select: none;
    -ms-content-zooming: none;
    -ms-user-select: none;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: url("../img/bg.jpg") #B6B6B6;
    background-size: 100%;
}

HTML5 is not as "universal" as one would think it is, stylesheets are filled by platform dependent tricks...

回答2:

This solution is based on Windows Xaml project.

 public MainPage()
    {
        InitializeComponent();
        this.CordovaView.DisableBouncyScrolling = true;
        //Splash_Screen();
    }

I have added this in my C# class file. Works perfect

use latest cordova 2.5+

You can also control the webview bounce in CSS by following this solution:

Link: https://stackoverflow.com/a/20974644/1848109

回答3:

I solved this by creating a "scrollable" style in CSS:

.scrollable {
    overflow: scroll;
    touch-action: pan-y;
    -ms-touch-action: pan-y;
}

And then in the area in your markup that you want to be scrollable:

<div class="scrollable">
    Hello world<br/>
    Hello world<br/>
    Hello world<br/>
    Hello world<br/>
    Hello world<br/>
    Hello world<br/>
    Hello world<br/>
</div>

回答4:

This works on Windows 10 Mobile. I got it from the WinJS templates:

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    cursor: default;
    -ms-scroll-translation: vertical-to-horizontal;
}
html {
    overflow: hidden;
}
body {
    -ms-content-zooming: none;
}

来源：https://stackoverflow.com/questions/18821436/webview-bounce-in-windows-phone-8

标签

css

windows-phone-8

cordova