可以移动滚动条位置？ [英] Possible to move Scrollbar position?
问题描述
是否可以将滚动条的位置移动到页面的不同部分？
还是有其他解决方案吗？
< div style =overflow：scroll; overflow-y：hidden>
< / div>
我想将滚动条放在另一个组件中，而不是这个div。
我今天有这样的样子
< div id =table_containerstyle =width ：100％; margin：0 auto;>
< table style =width：200px; border：1px solid black; float：left;>
这是数据我不想滚动所以它是相同的，即使我滚动其他表X
< / table>
< div class =resultsid =contractListstyle =overflow：scroll; overflow-y：hidden>
< table style =border：1px solid black; float：left;>
这个表我有这样的内容是scrolleble由X
< / table>
< / div>
< / div>
我想添加的是，我可以通过添加$ b $滚动所有的内容b overflow：scroll; overflow-x：隐藏到我的第一个div，仍然能够通过X滚动第二个表，而不必在第一个div的底部。
在HTML中使用JavaScript和CSS可以实现这一点; http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic\">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;
/ *设置背景颜色为透明，以移除滚动条顶部的蓝线* /
background-color：blue;
}
#innerScrollbar
{
height：1px;
line-height：1px;
font-size：1px;
visibility：hidden;
background-color：yellow;
}
< / style>
< script type =text / javascript>
//获取浏览器的滚动条宽度，从中复制（并感谢）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）;
};
//在滚动内容时更新滚动条
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>这里是内容，你现在可以把滚动条div任何你想要的地方。但请记住，滚动条本身仍将是浏览器/操作系统的滚动条。< / div>
...其他网站的东西在这里...
< div id =scrollbaronscroll =updateScrollbar（document.getElementById（'content'），this ）>< div id =innerScrollbar><！ - dummy text - >< / div>< / div>
< script type =text / javascript>
//更新scrollbar-container height，滚动条的高度+ 1，
//没有一点内容可见，滚动条不会显示！
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;
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.
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;
这篇关于可以移动滚动条位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
