Javascript 可以移动滚动条位置吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7889449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Possible to move Scrollbar position?
提问by Trind
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.
我希望滚动条在另一个组件中而不是在这个 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.
我想添加的是这样我就可以通过添加溢出来滚动所有内容：滚动；溢出-x：隐藏到我的第一个 div 并且仍然能够按 X 滚动第二个表而不必在第一个 div 的底部。
回答by Yeti
Yes this is possible with JavaScript and CSS on HTML;-)
是的，这在 HTML 上使用 JavaScript 和 CSS 是可能的；-)
Check out the code I made for you in the http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basicJust 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.
查看我在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>
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:
哦等等，我重读了你的问题，我似乎很清楚你想要什么。所以你可以只打印 X 个表格，你可以在其中滚动 Y 轴。在表格的底部，您放置滚动条 div，您将不得不稍微调整 javascript 并循环浏览表格：
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;
您将需要检索 maxWidthFromTables，当使用不同宽度的表格时，只需从以下位置获取最大宽度： tables[i].scrollWidth;
回答by Rene Pot
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.
是的，这是可能的，但你必须作弊。使页面最大宽度为 100%，因此不会显示滚动，并放置一个具有滚动可能性的 DIV（或其他内容）。这样滚动条就会出现在其他地方。
css:
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:
html：
<body><div class="mydiv">Put a very large content here</div></body>
