How to scroll div content in mobile web app?
I am developing a mobile webapp in HTML, Javascript, CSS and jQuery ...
I am developing a registration page that contains text boxes inside a div ... Since the page is larger than the screen size, I want to show a scroller ...
iScroll is not useful here as there are text fields in the form and the user has to enter text in it .... (iScroll bug http://code.google.com/p/iscroll-js/issues/detail?id=17 )
I've tried so many custom scrollers, but they don't work on mobile ...
Is there any solution to fix this?
source to share
I once worked on a similar concept and used tinyscrollbar on this project. I think you can get a copy of tinyscrollbar here. However, you need to press the scroll bar and display it up or down to scroll on mobile devices, not just scroll up or down in the middle of the screen as you would normally on a simple page.
Tinyscrollbar https://github.com/Empact/jquery-tinyscrollbar
Javascript bit for tinyscrollbar
<script type="text/javascript">
$(document).ready(function(){
$('#scrollbar').tinyscrollbar();
});
</script>
Html
<div id="scrollbar">
<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
Your Content
</div>
</div>
</div>
Other plugins available can be found here if you haven't tried them yet. Which I also haven't tried
source to share