Cordova - Scrolling with a fixed header and footer (ios)
- by Samu Singh
Using Cordova (phonegap) & bootstrap to make a mobile application, testing on IOS for now.
Getting an issue with a header and footer bar that are fixed with scrollable content in the middle. When tapping to scroll, the header/footer bar moves down or up with the content but then snaps back to place as soon as the scrolling completes. If I use
-webkit-overflow-scrolling: touch;
it works as expected, but it makes it really awkward to scroll through the content, and if you scroll passed the end, it only scrolls the header or footer (with elastic overflow) until you stop for a second.
here's my html for the header/footer bars:
<div id="headerBar">
<div class="container-fluid" style="background-color: #1569C7">
<div class="row">
<div class="col-xs-3 text-left">
<button id="logoutButton" type="button" class="btn btn-default">
Log Out
</button>
<button type="button" class="btn btn-default" id="restoreQuestionFeedButton">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>
<div class="col-xs-6 text-center" style="height: 55px">
<strong id="usernameText"></strong>
</div>
<div class="col-xs-3 text-right">
<button id="oldCreatQuestionButton" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</div>
</div>
<div id="footerBar">
<div class="container-fluid" style="padding: 0">
<div class="row text-center">
<button id="createQuestionButton" type="button" class="btn btn-default footerButton">
<span class="glyphicon glyphicon-plus"></span> <strong>Ask a new free question!</strong>
</button>
</div>
</div>
</div>
And here is the related CSS:
#headerBar {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
background-color: #1569C7;
}
#footerBar {
position: fixed;
z-index: 100;
bottom: 0;
left: 0;
width: 100%;
background-color: #1569C7 !important;
}
