html - scrolling issue on iPad and Android -
i have 2 scrollable divs. 1 vertical scroll , and 1 horizontal scrolling folowing structure:
html:
<div class="main"> <div class="vscoller"> <div class="nohscroll">some text</div> <div class="hscroller"> <div class="body">some text</div> </div> </div> </div>
css:
.main { width: 400px; height: 400px; border: solid 1px black; overflow-y: auto; overflow-x: hidden; } .vscoller { height: 5000px; width: 400px; position: relative; } .nohscroll { width: 150px; background-color: green; height: 5000px; } .hscroller { width: 250px; overflow-x: auto; overflow-y: hidden; position: absolute; left: 150px; top: 0; } .body { background-color: gray; height: 5000px; width: 5000px; }
on ipad , android can't scroll , down on .body
div. can tell me how can correct this?
i have tried , works, guess missing following line in html head:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
Comments
Post a Comment