Использовать полосу прокрутки Windows как отдельный элемент
Кажется, очень просто использовать стандартную полосу прокрутки браузера как отдельную
полоса прокрутки для любых целей.
Вам просто нужно 3 <div> с некоторыми CSS-параметрами:
container-div
переместить scrollbox-div немного влево (в противном случае - содержимое-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+scrollbox-height и content-height, вы можете
изменить размер ручки полосы прокрутки.
Просто поэкспериментируйте, изменив параметры.
С помощью некоторых jquery вы можете получить / установить scrolltop-value. Так что с этим параметром и некоторыми
jquery вы можете выбрать любую часть данных, которые вы хотите отобразить.
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);
}
);
});