0
스크롤바를 아래로 만들고 실제로 작동시키는 방법을 찾았지만 원래의 스크롤 막대를 숨기고 그림에 스크롤 막대 만 표시하는 방법을 모르지만 여전히 새롭다.스크롤바 사용자 정의
HTML : -
<div class="parent">
<div class="scrollbar"></div>
<div class="scrollable">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis.
Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur.</p>
</div>
</div>
CSS : -
.parent{
position:relative;
margin:50px;
overflow:hidden;
height:200px;
width:180px;
background:#ddd;
}
.scrollable{
overflow-y:scroll;
position:absolute;
padding:0 17px 0 0;
width: 180px;
height:100%;
}
.scrollbar{
position:absolute;
overflow:auto;
top:0px;
right:0px;
z-index:2;
background:#444;
width:7px;
border-radius:5px;
}
자바 스크립트 : -
,var $scrollable = $('.scrollable');
var $scrollbar = $('.scrollbar');
$scrollable.outerHeight(true);
var H = $scrollable.outerHeight(true);
var sH = $scrollable[0].scrollHeight;
var sbH = H*H/sH;
$('.scrollbar').height(sbH);
$scrollable.on("scroll", function(){
$scrollbar.css({top: $scrollable.scrollTop()/H*sbH });
});
당신이 사용하는 어떤 브라우저? 크롬에서는 원래의 스크롤바가 숨겨져 있습니다! –
크롬을 사용하고 있습니다 – pexichdu
'.scrollable' CSS에'width : 100 %;'를 추가하십시오 –