JQuery計算滾動條長度和位置,代碼如下:
javascript
復制代碼 代碼如下:$(document).ready(function () {
$(".bod").height(($(document).height() - 80) + "px");
$("#mainScrollContent").height(($(document).height() - 125) + "px");
scrMaxHeight = ($(document).height() - 125); //滾動條最大高度
$("#scrollBody").height(($(document).height() - 125) + "px");
$("#scrollBodyBack").height(($(document).height() - 125) + "px");
InitScroll();
$("#mainScrollContent").scroll(function () {
ChangeScroll();
});
var y1 = 0;
$("#scrollContent").mousedown(function (event) {
var scrContentTop = $("#scrollContent").css("top");
y1 = event.clientY - parseInt(scrContentTop.replace("px", ""));
$("#scrollContent").mousemove(function (event) {
if ((event.clientY - y1) < scrDefualtTop) {
$("#scrollContent").css("top", scrDefualtTop + "px");
}
else if ((event.clientY - y1) > (scrDefualtTop + scrMaxHeight - scrHeight)) {
$("#scrollContent").css("top", (scrDefualtTop + scrMaxHeight - scrHeight) + "px");
}
else {
$("#scrollContent").css("top", (event.clientY - y1) + "px");
}
ChangeScrollContent();
});
}).mouseup(function () {
$("#scrollContent").unbind("mousemove");
}).mouseout(function () {
$("#scrollContent").unbind("mousemove");
});
});
//改變滾動內容位置
function ChangeScrollContent() {
var scrTop = $("#scrollContent").css("top");
var st = parseInt(scrTop.replace("px", ""));
st = ((st - scrDefualtTop) * document.getElementById("mainScrollContent").scrollHeight) / scrMaxHeight
$("#mainScrollContent").scrollTop(st); //滾動的高度
}
//改變滾動條位置
function ChangeScroll() {
var scrTop = $("#mainScrollContent").scrollTop(); //滾動的高度
scrTop = (scrTop * scrMaxHeight) / document.getElementById("mainScrollContent").scrollHeight + scrDefualtTop;
$("#scrollContent").css("top", scrTop + "px");
}
</script>
滾動區域內容DIV:
html
主要樣式:
css
.jtc_neir{margin-left:20px; margin-right:20px; color:#000000; font-size:12px; background:none; line-height:32px; overflow-y:scroll;overflow-x:hidden;
scrollbar-3dlight-color:rgb(222,222,222);
scrollbar-arrow-color:rgb(222,222,222);
scrollbar-base-color:rgb(222,222,222);
scrollbar-darkshadow-color:rgb(222,222,222);
scrollbar-face-color:rgb(222,222,222);
scrollbar-highlight-color:rgb(222,222,222);
scrollbar-shadow-color:rgb(222,222,222);}
.jtc_tiao{width:8px; position:absolute; top:80px; right:20px; z-index:10;}
.tiao_up{width:8px; height:10px; background:url(../images/scrollbar-3.jpg) left top no-repeat; line-height:0px; overflow:hidden;}
.tiao_mid{width:8px; background:url(../images/scrollbar-3.jpg) -39px center repeat-y; line-height:0px; overflow:hidden;}
.tiao_bottom{width:8px; height:10px; background:url(../images/scrollbar-3.jpg) -13px bottom no-repeat;font-size:0; line-height:0px; overflow:hidden;}