JQuery+DIV 사용자 정의 스크롤 바 스타일 구현
javascript
<script type="text/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 <= 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); //
$("#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
<div class="jtc_neir" id="Div1" style="height: 100px;">
:11.66 ( -1.75%)
<br />
<a href="bank.aspx">dddd</a> :0.19 ( 23.72%)
<br />
:0.04
<br />
:1.58%
<br />
:12.22%( 39.89%)
<br />
:30.46 ( -7.14%)<br />
as
<br />
:11.66 ( -1.75%)
<br />
:0.19 ( 23.72%)
<br />
:0.04
<br />
:1.58%
<br />
:12.22%( 39.89%)
<br />
:30.46 ( -7.14%)<br />
as
<br />
:11.66 ( -1.75%)
<br />
:0.19 ( 23.72%)
<br />
:0.04
<br />
:1.58%
<br />
:12.22%( 39.89%)
<br />
:30.46 ( -7.14%)<br />
as
<br />
:11.66 ( -1.75%)
<br />
:0.19 ( 23.72%)
<br />
:0.04
<br />
:1.58%
<br />
:12.22%( 39.89%)
<br />
:30.46 ( -7.14%)<br />
as
<br />
:11.66 ( -1.75%)
<br />
:0.19 ( 23.72%)
<br />
:0.04
<br />
:1.58%
<br />
:12.22%( 39.89%)
<br />
:30.46 ( -7.14%)<br />
as
<br />
</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;}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
그림 밑에 공백 픽셀이 생기는 6가지 해결 방법1、그림을 블록급 대상으로 변환하면 아래 공백을 제거할 수 있습니다 2. 그림의 수직 정렬 설정 3. 부모 대상의 문자 크기를 0px로 설정 4. 부모 대상의 속성 변경 5、그림의 부동 속성을 설정하면 공백을 제거할...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.