If you execute this code, you will see 2 div in the screen.
The initial position from both are ok.
But, after you start touch the first one (the green one), the second one change the position.
How to fix that ?
<style type="text/css" media="screen">
div{
overflow:hidden;
}
</style>
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
scroll
<div id="area_2" style='width:250px; height:350px; background-color:#A9E2E7; left:480px;position:absolute;'>
<div touch_scroll="x" style='width:2250px; height:350px; background-color:#E1AEE1;'>
1234567890 1234567890 12345678901234567890 1234567890 12345678901234567890 1234567890 12345678901234567890
1234567890 12345678901234567890 1234567890 12345678901234567890 1234567890 12345678901234567890 1234567890 12345678901234567890 1234567890
12345678901234567890 1234567890 12345678901234567890 1234567890 12345678901234567890 1234567890 1234567890
</div>
</div>