Possible To Move Scrollbar Position?
Solution 1:
Yes this is possible with JavaScript and CSS on HTML;-)
Check out the code I made for you in the http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic Just copy&paste to see how it works, I do not think explanation is required. I hope this answers your question? Because it was not really crystal clear to me what you required.
<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><styletype="text/css">#content
{
width: 200px;
overflow-x: hidden;
overflow-y: auto;
white-space: pre;
background-color: red;
}
#scrollbar
{
width: 200px;
overflow-x: scroll;
overflow-y: hidden;
/*set background color to transparent, to remove the blue line on top of the scrollbar*/background-color: blue;
}
#innerScrollbar
{
height: 1px;
line-height: 1px;
font-size: 1px;
visibility: hidden;
background-color: yellow;
}
</style><scripttype="text/javascript">//getting scrollbar width of browser, copied from (and thanks to) http://www.alexandre-gomes.com/?p=115functiongetScrollBarWidth()
{
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
};
//update scrollbar on page load, and when scrolling the contentfunctionupdateScrollbar(content, scrollbar)
{
scrollbar.getElementsByTagName('*')[0].style.width = content.scrollWidth + "px";
content.scrollLeft = scrollbar.scrollLeft;
}
</script></head><bodyonload="updateScrollbar(document.getElementById('content'), document.getElementById('scrollbar'))"><divid="content">Here goes the content, you can now place the scrollbar div anywhere else you wish. But keep in mind that the scrollbar itself will still be the scrollbar of the browser/OS.</div>
...other website stuff goes here...
<divid="scrollbar"onscroll="updateScrollbar(document.getElementById('content'), this)"><divid="innerScrollbar"><!--dummy text--></div></div><scripttype="text/javascript">//update scrollbar-container height, to height of scrollbar + 1,//without a tiny bit of content visible, the scrollbar will not show at all!document.getElementById('scrollbar').style.height =(getScrollBarWidth() + 1) + "px";
</script></body></html>Ow wait, I reread your question, and it seems clear to me what you want. So you can just print X number of tables, in which you can just scroll the Y-axis. And at the bottom of the tables, you put the scrollbar div, and you will have to adapt the javascript a bit and loop through the tables:
innerscrollbar.style.width = maxWidthFromTables + "px";
tables[i].scrollLeft = scrollbar.scrollLeft;
you will need to retrieve maxWidthFromTables, when using tables of different width, just get the maximum width from: tables[i].scrollWidth;
Solution 2:
Yes this is possbible, but you'll have to cheat. Make the page maximum of 100% width, so no scroll will ever show, and put a DIV (or something else in it) with a scroll possibility. This way the scroll bar will show up somewhere else.
css:
body,html{ margin: 0; padding:0; height: 100%; overflow: hidden}
.mydiv { width: 200px; height: 200px; position: absolute; top: 200px; left: 200px; overflow-y: scroll}
html:
<body><divclass="mydiv">Put a very large content here</div></body>
Post a Comment for "Possible To Move Scrollbar Position?"