jQuery - Use window scrollbar to scroll content inside a DIV
Is it possible to use window scrollers to scroll a big DIV content? instead of its own div scrolle开发者_JS百科r?
Something like
- Make the body fixed position
- Add event listeners to body scroll
- Apply the body scroll to the desired container
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:
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
By changing the container+scrollbox-height and the content-height you can
change the scrollbar handle size.
Just experiment by changing the parameters.
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);
}
);
});
Since the scrollbar only affects the overall page, and not a specific element, no.. at least not without replacing the scrollbar entirely (strongly discouraged).
加载中,请稍侯......
精彩评论