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.
'[javascript]' 카테고리의 다른 글
| [javascript] 특정문자 길이로 자르기 (match함수) (0) | 2018.12.23 |
|---|---|
| [javascript] 자바스크립트 화면 캡쳐하기 (html2canvas.js)와 저장하기 (0) | 2018.12.23 |
| i'mport(아임포트) 결제 모듈 간편하게 사용해보기 (5) | 2018.07.01 |
| 자바스크립트(javascript)로 pdf 파일 만들기 (0) | 2018.06.19 |
| jquery 모든 radio button 모두 값 가져오기 (0) | 2018.05.01 |
미나미나미