웹사이트에 정보가 표시될 때 정보의 양이 너무 많으면 크게 세 가지 해결 방법이 있습니다. 1. 페이징, 페이지에 정보를 표시합니다. 2. 전체 페이지가 표시되지만 페이지가 너무 길어서 탐색 경험에 영향을 미칩니다. 3. 스크롤바를 사용하지만 기본 스크롤바 스타일이 너무 단조롭고 사용자 경험이 친숙하지 않습니다. 따라서 스크롤 막대를 아름답게 해야 합니다.
스크롤바를 아름답게 만드는 가장 쉬운 방법은 jquery 플러그인을 사용하는 것입니다. 이 글에서는 jquery 플러그인의 스크롤바 플러그인 나노스크롤러를 소개합니다.
공식 디스플레이, 스타일 맞춤화 가능
1. 나노스크롤러 플러그인 기능
콘텐츠 스크롤 기능 구현
2.나노스크롤러 공식주소
http://jamesflorentino.github.io/nanoScrollerJS/
3.나노스크롤러 사용법
1. 참고자료
<script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.nanoscroller.js"></script> <link rel="stylesheet" href="nanoscroller.css">
2. 스크롤바 스타일 정의
.nano { background: #bba; width: 500px; height: 500px; font-size:12px;font-family:微软雅黑;border-radius:8px; }
.nano .content {
padding: 20px;
}
.nano .pane {
background: #555;
width: 8px;
right: 1px;
margin: 5px;
}
.nano .slider {
background: #111;
}
3. 표시된 콘텐츠 스크롤
<div id="about" class="nano"> <div class="content"> 滚动显示的内容 </div> </div>
위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
