Using jquery to move horizontal scroll bar to top of div rather than bottom

JavaScript
1

I needed to move horizontal scrollbar on a div to the top instead of the bottom of the div, I found a bit of a work around and for some reason its not working.

Its all set up and looking perfect, but the pretend scrollbar in the top div isnt scrolling the content in the bottom div.


.container-outer, .wrapper1 { overflow: scroll; overflow-x: hidden; width: 99.9%; border:#666 solid 1px; height: 340px; margin-top:25px; position:relative; 
}
.wrapper1 {height: 18px; overflow-y: hidden; overflow: scroll;}
.container-inner { width: auto; 
}

<script language="javascript">
$(function(){
  $(".wrapper1").scroll(function(){
    $(".container-outer").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".container-outer").scroll(function(){
    $(".wrapper1").scrollLeft($(".container-outer").scrollLeft());
  });
});
</script>


<div class="wrapper1">
<div class="container-inner">
<div class="table">
<table class='gridtable' cellpadding='0' cellspacing='1'> 
<!-- content is in here but not worth putting here -->
</table>
</div>
</div>
</div>

<div class="container-outer">
<div class="container-inner">
<div class="table">
<!-- content is in here but not worth putting here -->
</table>
</div>
</div>
</div>
2

Sorry problem resolved forgot to add the include


[FONT=Courier New]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>[/FONT]
3

I knew I would be back on this scrollbar issue for some reason, and one has definately been found.

The scrollbar works fine on all browsers, but on a mobile or tablet it doesnt appear at atll, and the functionality of scrolling right to left doesnt work at all.

The idea above as you will probably know is that I needed to have the scrollbar at the top of the div rather than at the bottom, so solved it by creating a dummy div above it and trimming it down so it appears connected to the main table, but the jquery code is controlling the bottom div with the scrollbar of the top div.

4

There another problem on tablets and that is that in the browser the div extends to 99.9% of the screen, and so then the scrollbar allows the user to scroll horizontally to see the very long table, so the user is scrolling left to right without the actual browser scrolling.

On a tablet, the table the whole page scrolls, and so the idea is lost completely, and also the scrollbar in the pretend div doesnt appear at all.

I would link to it here but there a log in and there secure docs in there, so would need to send privately.

5

I solved one of the problems in how its viewed on a table by adding - <meta name=“viewport” content=“width=device-width,initial-scale=1,maximum-scale=1”>

The page at least now looks like its in the browser, but the main problem is that the scrollbars attached to the div do not appear at all, and the functionality of being able to scroll the div horizontally is not working either.