Top screen swipe side to side, bottom stay put

I have an HTML page with 9 two-column tables. Below those is a Javascript lap counter. The person would look up the tables to find the one he wants, then scroll down to the counter to start the counter. He should be able to jump back and forth from the counter to the table quickly. Unfortunately, with 9 tables, it’ll become a chore with all that scrolling.

So I’d like the first screen to be the tables swiping side to side, then he can scroll down to the lap counter function. Then it will be an easy matter to scroll up and down just one screen.

How do I incorporate side to side and up and down methods on the same HTML page? This will go in iPhone and Android devices.

Obviously, the lap counter should stay in view right under the chart chosen. The user should not choose a chart after 5 swipes, only to scroll down and swipe 5 times in the other direction to get the lap counter functionality.

I can only use HTML, CSS, and Javascript for this page. I don’t believe iFrames are consistently available, unfortunately.


I think I found a solution, using jQuery.

jquery is difficult for me i will solve it by j2me