Question

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

或者还有其他解决办法吗？

 <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来滚动所有内容溢出：滚动; overflow-x：隐藏到我的第一个div，仍然能够通过X滚动第二个表，而不必位于第一个div的底部。

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

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

可以移动滚动条位置？

2 个答案: