Question

I’m building a mobile app using HTML, CSS, Javascript and jQuery.

Is there a way to scroll a div that is longer (700px) than the mobile screen (480px) using only two buttons, one for down and one for up?

So when a user presses and holds the down button it appears to scroll down the div by about 10px at a time.

Edit:

The mobile app is actually being compiled with Phonegap, so it won’t be a mobile website but an actual application.

The application features dragging and dropping quite heavily and in order to do this using JQuery and HTML, I’ve had to bind the mousedown, mouseup and mousehover events to touch events.

Because of this the user cannot simply drag the screen to scroll as they would a typical application. Therefore, I have decided to go with physical buttons instead of scrolling the navigation div.

The navigation div is set to have a greater height than the canvas (screen height and width) div. This will be the div the user is scrolling.

Answer 1

Is the div you’re talking about scrolling the full page itself? Or is it a specific div that you want to “scroll” within the page (kind of like an iframe)?

Both can be done. If you’re scrolling the full page, I’m not sure why you’d want to use buttons rather than let Safari simply handle the standard swipe gestures. But, it could be done this way:

1. Use fixed positioning on the buttons so that they don’t move as the rest of the screen scrolls.
2. Use use jQuery’s .scrollTop method to do the scrolling.

If, on the other hand, you want to make a scroll effect on a single div, without the rest of the page scrolling, then just do the following:

1. Wrap that div in another div that has overflow:hidden; position:relative
2. Make the inner div position:absolute
3. Animate the inner div’s top property to create the scrolling effect.