可以移动滚动条位置吗？答案

【问题标题】：Possible to move Scrollbar position?可以移动滚动条位置吗？
【发布时间】：2011-12-14 22:09:58
【问题描述】：

是否可以将滚动条的位置移动到页面的不同部分？

或者有其他解决方案吗？

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

 </div>

我希望滚动条在另一个组件中，而不是在这个 div 中。

我今天也是这样

<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>

我想添加的是，我可以通过添加 Y 滚动所有内容溢出：滚动；溢出-x：隐藏到我的第一个 div 并且仍然能够将第二个表格滚动 X，而不必位于第一个 div 的底部。

【问题讨论】：

如果有一个看起来像滚动条的组件，我可以使用 javascript 来滚动组件。
你可以也许让它看起来像那样（取决于你的想法），你绝对可以用 Javascript 让滚动条看起来很像，但是你有展示你所追求的一些草图。
我已经根据我今天得到的内容以及我想要的方式稍微编辑了我的问题。希望我让自己更清楚。
我的回答符合你的需要吗？

标签： javascript html css

【解决方案1】：

是的，这可以通过 HTML 上的 JavaScript 和 CSS 实现；-)

查看我在http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic 中为您制作的代码只需复制并粘贴以查看其工作原理，我认为不需要解释。我希望这回答了你的问题？因为我并不清楚你需要什么。

<!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>

等等，我重读了你的问题，我似乎很清楚你想要什么。所以你可以打印 X 个表格，你可以在其中滚动 Y 轴。在表格的底部，您放置滚动条 div，您必须稍微调整一下 javascript 并循环遍历表格：

innerscrollbar.style.width = maxWidthFromTables + "px";
tables[i].scrollLeft = scrollbar.scrollLeft;

您将需要检索 maxWidthFromTables，当使用不同宽度的表格时，只需从以下位置获取最大宽度：tables[i].scrollWidth;

【讨论】：

是的，我认为这样的方法可以解决问题，非常感谢，我明天试试。

【解决方案2】：

是的，这是可能的，但你必须作弊。使页面最大宽度为 100%，这样就不会显示任何滚动，并在其中放置一个具有滚动可能性的 DIV（或其他东西）。这样滚动条就会显示在其他地方。

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><div class="mydiv">Put a very large content here</div></body>

【讨论】：

非常感谢您的帮助，但我想我只是在您安装 awnsered 时重新编辑了我的问题，比如 Yeti awnsered。