Home/ Questions/Q 6751467
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T12:55:51+00:00

Is it possible to move the position of a scrollbar to diffrent part of

  • 0

Is it possible to move the position of a scrollbar to diffrent part of the page?

Or is there any other solution for this?

 <div style="overflow: scroll; overflow-y: hidden">

 </div>

i want the scrollbar to be in another component instead inside this div.

I have it like this today

<div id="table_container" style="width: 100%; margin: 0 auto;">
<table style="width:200px;border: 1px solid black;float: left;">
  This is data i don't wanna scroll so it is allways same even if i scroll the other table    by X
 </table>

<div class="results" id="contractList" style="overflow: scroll; overflow-y: hidden">
<table style="border: 1px solid black;float: left;">
 This table i  have so the content is scrolleble by X
 </table>
 </div>
 </div>

What i would like to add is so i can scroll all the content by Y by adding
overflow: scroll; overflow-x: hidden to my first div and still being able to scroll the second table by X without having to be at the bottom of the first div.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="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>
<script type="text/javascript">

//getting scrollbar width of browser, copied from (and thanks to) http://www.alexandre-gomes.com/?p=115
function getScrollBarWidth()
{
  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 content
function updateScrollbar(content, scrollbar)
{
  scrollbar.getElementsByTagName('*')[0].style.width = content.scrollWidth + "px";
  content.scrollLeft = scrollbar.scrollLeft;
}

</script>
</head>
<body onload="updateScrollbar(document.getElementById('content'), document.getElementById('scrollbar'))">

  <div id="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...

  <div id="scrollbar" onscroll="updateScrollbar(document.getElementById('content'), this)"><div id="innerScrollbar"><!--dummy text--></div></div>
  <script type="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;

    • 0