Apache cordova on android where are scrollbars?

2020-07-18 08:05发布

问题:

I try to build a simple app with cordova which target android

I just want to have a scrollable div but

  • if the content is smaller than the div's height, the scrollbar is always visible
  • if the content is bigger than the div's height, the scrollbar never appear, even if I scroll : the scroll is possible but no scrollbar position indication

My layout is simple :

<body>
    <div id='views'>
        <div class='view'>
            Lorem ipsum ...
        </div>
    </div>
</body>

Css is simple too :

#views {
    position : absolute;
    top:0; right:0; bottom:0; left:0;
}

.view {
    position : absolute;
    top:0; right:0; bottom:0; left:0;
    overflow-x                 : hidden;
    overflow-y                 : scroll;
    -webkit-overflow-scrolling : touch;
    overflow-scrolling         : touch;
}

Then I use command : cordova run android

note :

  • I use cordova version 3.3.1-0.3.1
  • test on Nexus 7 updated (android kitkat)
  • with last android API : 19

Thanks for your help

edit : I just try with iOs simulator (iOS 6.1), the scrollbars are visibles when I scroll ...

[updated] Thanks to help me. Here is is the correct code to have scrollbars on android

[updated 2] It's not totally ok, try this, the whole window scroll, not only the .view content

HTML

<body>
    <div id='views'>
        <div class='view'>
            Lorem ipsum ...
        </div>
    </div>
    <div id='menu-bt'></div>
</body>

CSS

.view {
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    overflow:visible;
    -webkit-overflow-scrolling:touch;
    overflow-scrolling:touch;
}

#menu-bt {
    position:absolute;
    right:40px; bottom:40px;
    width:50px; height:50px;
    background-color:green;
}

Then, add this line in file /plateforms/android/src/io/cordova/myProject/MyProject.java

super.appView.setVerticalScrollBarEnabled(true);

回答1:

Tested here and changing your overflows to visible it works.

Also, make sure to enable the scrollbars in your Android Activity file (as pointed here) by adding the following line:

super.appView.setVerticalScrollBarEnabled(true);


回答2:

Go to: SystemWebViewEngine.java which located in yourAppName\platforms\android\CordovaLib\src\org\apache\cordova\SystemWebViewEngine.java

Set webView.setVerticalScrollBarEnabled(true);