Question

I am designing mobile webapp in HTML, Javascript, CSS & jQuery …

I am designing sign up page which contains text boxes inside screen size div…
As page is bigger than screen size I want to show a scroller …

iScroll is not useful here as there are text boxes in form and user should enter text in it….(iScroll bug http://code.google.com/p/iscroll-js/issues/detail?id=17)

I have tried so many custom scrollers but they are not working on mobile …

Is there any solution to fix this ???????

Answer 1

I had once worked on similar concept and had used tinyscrollbar in that project. I think you can get the copy of tinyscrollbar for here. However you have to press the scroll bar and silde it up or down to scroll on mobile devices and not simply scroll up or down in the middle of the screen as you would normally do in a simple page.

Tinyscrollbar
https://github.com/Empact/jquery-tinyscrollbar

The 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 that are avaliable can be found here if you haven’t tried them yet. Which I also haven’t tried

http://www.net-kit.com/jquery-custom-scrollbar-plugins/