jQuery-使用窗口滚动条滚动DIV中的内容 [英] jQuery - Use window scrollbar to scroll content inside a DIV
问题描述
是否可以使用窗口滚动条滚动大的DIV内容?而不是自己的div滚动条?
Is it possible to use window scrollers to scroll a big DIV content? instead of its own div scroller?
推荐答案
使用Windows滚动条作为单独的元素
将标准的浏览器滚动条单独使用似乎非常简单
滚动条用于任何目的.
您只需要3个<div>和一些CSS参数:
Use Windows scrollbar as separate element
It appears to be very simple to use de standard browser scrollbar as a seperate
scrollbar for any purpose.
You just need 3 <div> with some CSS-parameters:
-
container-div:
将scrollbox-div重新定位到左侧一点(否则，content-div 保持可见). -
scrollbox-div:
scrollbox-div获取滚动条，因为它包含contents-div，该滚动条 大于scrollbox-div.scrollbox-div相对于 左侧(-24px)，因此contents-div在container-div中不可见.contents-div的大小不能小于33 px的大小，否则滚动条将在IE中消失. -
contents-div:
contents-div大于srollbox-div，以强制滚动条. 它包含无"，因此将不可见
container-div:
to reposition thescrollbox-diva little bit to the left (otherwise the content-div stays visible).scrollbox-div:
Thescrollbox-divgets the scrollbar, because it contains thecontents-div, which is larger then thescrollbox-div. Thescrollbox-divis relative-repositioned to the left (-24px), so thecontents-divis not visible in thecontainer-div. Thecontents-divcan not be made much smaller then about33 px, otherwise the scrollbar disappears in IE.- the
contents-div:
Thecontents-divis larger then thesrollbox-divto force a scrollbar. It contains NOTHING, so it will be invisible
通过更改container+scrollbox-height和content-height，您可以
更改滚动条手柄大小.
只需通过更改参数进行试验即可.
By changing the container+scrollbox-height and the content-height you can
change the scrollbar handle size.
Just experiment by changing the parameters.
使用一些jquery，您可以获取/设置scrolltop-value.所以有了这个参数和一些
jQuery，您可以选择要显示的数据的任何部分.
With some jquery you can get/set the scrolltop-value. So with this parameter and some
jquery you can select any part of data you want to display.
HTML:
<body>
<div id="container" >
<div id="scrollbox" >
<div id="content" >
</div>
</div>
</div>
<p>scrolltop= <span id="scrolltop" ></span></p>
</body>
CSS:
#container{
width: 16px;
height: 500px;
overflow: hidden;
}
#scrollbox{
width: 40px;
height: 500px;
position:relative;
left: -24px;
overflow: auto;
}
#content{
height: 50000px;
}
JQUERY:
$('document').ready(function(){
$("#scrollbox").scroll(
function () {
var scrolltop=$('#scrollbox').scrollTop();
$('#scrolltop').text(scrolltop);
}
);
});
这篇关于jQuery-使用窗口滚动条滚动DIV中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
