'scrol;lbar 바꾸기'에 해당되는 글 1건


overflow 사용시 scrollbar(스크롤바) niceScroll.js로 바꾸기 



CSS에서 overflow : auto를 사용하면,

크기를 벗어날 시 자동으로 스크롤 바가

생기는 것을 볼 수 있습니다.


아래의 화면에서 보여지는 기본 스크롤 바를

아래의 사진처럼 바꿔 보겠습니다


BEFORE



바뀌면 계속 쭈욱 남아있지않고, 아이폰 스크롤바처럼 사라집니다.

그리고, 공간을 차지하지 않습니다.


AFTER




그러면, 적용 방법!

<style>
#box{
border: 1px solid;
width:500px;
height:300px;
background:yellow
}
#big_box{
width: 1000px;
height: 800px;
overflow: auto;
border: 1px solid;
}
</style>


<body>
<div id="big_box">
<!--
big_box 안에
box가 3개가 들어가서
css overflow : auto로 설정해두어서
스크롤바가 생성될겁니다.
-->
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
</div>


<script>
//ready시
$(function () {
$("#big_box").niceScroll();
// niceScroll를 적용할 id값을 넣어주세요
// $("body").niceScroll();
// body안에 있는 요소들이 scroll로 생기실 nicescroll로 바뀝니다.
});
</script>
</body>





See the Pen nicescroll by Nami (@NamuNami) on CodePen.




블로그 이미지

미나미나미

,