JQuery+DIV自定義滾動(dòng)條樣式的具體實(shí)現(xiàn)
JQuery計(jì)算滾動(dòng)條長(zhǎng)度和位置，代碼如下：
javascript
<script type="text/javascript">
var scrMinHeight = 1; //滾動(dòng)條最小高度
var scrMaxHeight = 0; //滾動(dòng)條最大高度
var scrDefualtTop = 80; //滾動(dòng)條默認(rèn)位置
var scrHeight = 0;
//初始化滾動(dòng)條
function InitScroll() {
scrMaxHeight = $("#mainScrollContent").height(); //文本框高度
scrHeight = document.getElementById("mainScrollContent").scrollHeight; //滾動(dòng)文本高度
scrHeight = parseInt((scrMaxHeight / scrHeight) * scrMaxHeight);
if (scrHeight <= scrMinHeight) { scrHeight = scrMinHeight; }
if (scrHeight >= scrMaxHeight) { $("#scrollContent").hide(); }
else {
$("#scrollContent").show();
$("#scrollContent .tiao_mid").css("height", (scrHeight - 19) + "px");
}
}
$(document).ready(function () {
$(".bod").height(($(document).height() - 80) + "px");
$("#mainScrollContent").height(($(document).height() - 125) + "px");
scrMaxHeight = ($(document).height() - 125); //滾動(dòng)條最大高度
$("#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");
});
});
//改變滾動(dòng)內(nèi)容位置
function ChangeScrollContent() {
var scrTop = $("#scrollContent").css("top");
var st = parseInt(scrTop.replace("px", ""));
st = ((st - scrDefualtTop) * document.getElementById("mainScrollContent").scrollHeight) / scrMaxHeight
$("#mainScrollContent").scrollTop(st); //滾動(dòng)的高度
}
//改變滾動(dòng)條位置
function ChangeScroll() {
var scrTop = $("#mainScrollContent").scrollTop(); //滾動(dòng)的高度
scrTop = (scrTop * scrMaxHeight) / document.getElementById("mainScrollContent").scrollHeight + scrDefualtTop;
$("#scrollContent").css("top", scrTop + "px");
}
</script>
滾動(dòng)區(qū)域內(nèi)容DIV：
html
<div class="jtc_neir" id="Div1" style="height: 100px;">
營(yíng)業(yè)總收入:11.66億元(同比增長(zhǎng)-1.75%)
<br />
<a href="bank.aspx">dddd</a>凈利潤(rùn):0.19億元(同比增長(zhǎng)23.72%)
<br />
每股收益:0.04元
<br />
凈資產(chǎn)收益率:1.58%
<br />
毛利率:12.22%(同比增長(zhǎng)39.89%)
<br />
總資產(chǎn):30.46億元(同比增長(zhǎng)-7.14%)<br />
as大蘇打撒旦撒
<br />
阿斯蒂芬多個(gè)地方營(yíng)業(yè)總收入:11.66億元(同比增長(zhǎng)-1.75%)
<br />
凈利潤(rùn):0.19億元(同比增長(zhǎng)23.72%)
<br />
每股收益:0.04元
<br />
凈資產(chǎn)收益率:1.58%
<br />
毛利率:12.22%(同比增長(zhǎng)39.89%)
<br />
總資產(chǎn):30.46億元(同比增長(zhǎng)-7.14%)<br />
as大蘇打撒旦撒
<br />
阿斯蒂芬多個(gè)地方營(yíng)業(yè)總收入:11.66億元(同比增長(zhǎng)-1.75%)
<br />
凈利潤(rùn):0.19億元(同比增長(zhǎng)23.72%)
<br />
每股收益:0.04元
<br />
凈資產(chǎn)收益率:1.58%
<br />
毛利率:12.22%(同比增長(zhǎng)39.89%)
<br />
總資產(chǎn):30.46億元(同比增長(zhǎng)-7.14%)<br />
as大蘇打撒旦撒
<br />
阿斯蒂芬多個(gè)地方營(yíng)業(yè)總收入:11.66億元(同比增長(zhǎng)-1.75%)
<br />
凈利潤(rùn):0.19億元(同比增長(zhǎng)23.72%)
<br />
每股收益:0.04元
<br />
凈資產(chǎn)收益率:1.58%
<br />
毛利率:12.22%(同比增長(zhǎng)39.89%)
<br />
總資產(chǎn):30.46億元(同比增長(zhǎng)-7.14%)<br />
as大蘇打撒旦撒
<br />
阿斯蒂芬多個(gè)地方營(yíng)業(yè)總收入:11.66億元(同比增長(zhǎng)-1.75%)
<br />
凈利潤(rùn):0.19億元(同比增長(zhǎng)23.72%)
<br />
每股收益:0.04元
<br />
凈資產(chǎn)收益率:1.58%
<br />
毛利率:12.22%(同比增長(zhǎng)39.89%)
<br />
總資產(chǎn):30.46億元(同比增長(zhǎng)-7.14%)<br />
as大蘇打撒旦撒
<br />
阿斯蒂芬多個(gè)地方</div>
<div class="jtc_tiao" style="background-color: rgb(196,206,208); z-index: 2;" id="Div2">
</div>
<div class="jtc_tiao" style="background-color: rgb(222,222,222); z-index: 1; width: 16px;"
id="Div3">
</div>
<div class="jtc_tiao" id="Div4">
<div class="tiao_up">
</div>
<div class="tiao_mid">
</div>
<div class="tiao_bottom">
</div>
</div>
主要樣式：
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;}
相關(guān)文章
BootStrap Validator使用注意事項(xiàng)(必看篇)
針對(duì)bootstrap2和bootstrap3有不同的版本，在使用bootstrap validator時(shí)需要了解其注意事項(xiàng)，下面小編把我遇到的注意事項(xiàng)分享給大家，供大家參考2016-09-09
JS設(shè)計(jì)模式之觀察者模式實(shí)現(xiàn)實(shí)時(shí)改變頁(yè)面中金額數(shù)的方法
這篇文章主要介紹了JS設(shè)計(jì)模式之觀察者模式實(shí)現(xiàn)實(shí)時(shí)改變頁(yè)面中金額數(shù)的方法,結(jié)合實(shí)例形式對(duì)比分析了javascript基于觀察者模式實(shí)時(shí)改變頁(yè)面金額數(shù)的相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
JavaScript前端實(shí)現(xiàn)局部打印(精確打印)的幾種方式
前端可以打印差前端展示的任意頁(yè)面的任意內(nèi)容,下面這篇文章主要給大家介紹了關(guān)于JavaScript前端實(shí)現(xiàn)局部打印(精確打印)的幾種方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
大家都知道ElementUI是"餓了么"公司推出的基于Vue2.0的組件庫(kù)，這篇文章主要介紹了axios攔截器、ElementUI組件的使用方法,需要的朋友可以參考下2023-01-01
不錯(cuò)的用resizeTo和moveTo兩個(gè)函數(shù)實(shí)現(xiàn)窗口的“打乒乓球”效果
關(guān)于javascript中json 對(duì)象數(shù)組之間相互轉(zhuǎn)化問(wèn)題
在Javascript中為String對(duì)象添加trim,ltrim,rtrim方法
JS通過(guò)Cookie判斷頁(yè)面是否為首次打開(kāi)
JavaScript組合拼接字符串的效率對(duì)比測(cè)試