JQuery DIV自訂捲軸樣式的具體實作_javascript技巧

JQuery計算捲軸長度與位置，程式碼如下：

javascript

複製程式碼 程式碼如下: var scrMinHeight = 1; //滚动条最小高度 var scrMaxHeight = 0; //滚动条最大高度 var scrDefualtTop = 80; //滚动条默认位置 var scrHeight = 0; //初始化滚动条 function InitScroll() { scrMaxHeight = $("#mainScrollContent").height(); //文本框高度 scrHeight = document.getElementById("mainScrollContent").scrollHeight; //滚动文本高度 scrHeight = parseInt((scrMaxHeight / scrHeight) * scrMaxHeight); if (scrHeight 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); //滚动条最大高度 $("#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) $("#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 = $(" replace( "px", "")); st = ((st - scrDefualtTop) * document.getElementById("mainScrollContent").scrollHeight)/ //滾動的高度 }

//改變捲軸位置

function ChangeScroll() { var scrTop = $("#mainScrollContent").scrollTop(op); scrMaxHeight) / document.getElementById("mainScrollContent").scrollHeight scrDefualtTop; $("#scrollContent").css("top", scrTop "ppx");

捲動區域內容DIV： html

複製程式碼

程式碼如下: 營業總收入:11.66億元(年成長-1.75%) > dddd 淨利潤:0.19億元(年成長23.72%)

每股盈餘:0.04元

淨值報酬率:1.58%

毛利率:12.22%(年成長39.89%)元(年成長-7.14%)

as大蘇打撒旦撒

阿斯蒂芬多個地方營業總收入:11.66億元(年成長-1.75%)

淨利:0.19億元(年成長23.72%)

比率:1.58%

毛利率:12.22%(年成長39.89%)

/> as大蘇打撒旦撒

史蒂芬多地方營業總收入:11.66億元(同比增長-1.75%)

每股盈餘:0.04元

> 毛利率:12.22%(年成長39.89%)

總資產:30.46億元(同比成長-7.14%)

阿斯蒂芬多地方營業總收入:11.66億元(年成長-1.75%)

)

每股盈餘:0.04元

淨值報酬比去年同期成長39.89%)

總資產:30.46億元(年成長-7.14%)

as大蘇打>阿斯蒂芬多地方營業總收入:11.66億元(年成長-1.75%)

淨利:0.19億元(年成長23.72%) . > 每股盈餘:0.04元

淨值報酬率:1.58%

/> 總資產:30.46億元(同比增長-7.14%)

as大蘇打撒旦撒

1 🎜> id="Div3"> tiao_bottom">

主要樣式： css

複製程式碼 程式碼如下: .jtc_neir{margin-left:20px;右邊距：20px；顏色：#000000；字體大小：12px；背景：無；行高：32px；溢出-y：溢出；溢出-x：隱藏滾動滾動; 捲軸-3dlight-color:rgb(222,222,222); 捲軸條箭頭顏色：rgb(222,222,22225)> ,222); 捲軸-darkshadow-color :rgb(222,222,222); 滾動條面顏色：rgb(222,222,222); 滾動條突出顯示顏色：rgb(222,22,22225); 22,222);}

.jtc_tiao{width:8px;位置：絕對；上：80px；右：20px; z-index:10;} .tiao_up{寬度:8px;高度：10px；背景：url(../ images/scrollbar-3.jpg) 左上無重複；行高：0px；溢出：隱藏；} .tiao_mid{寬度：8px;背景：url(../images/scrollbar-3.jpg) -39px 中心重複-y;行高：0px；溢出：隱藏；} .tiao_bottom{寬度：8px;高度：10px；背景：url（../images/scrollbar-3.jpg）-13px底部無重複；字體大小：0；行高：0px；溢位：隱藏；}