ホームページ > 記事 > ウェブフロントエンド > jQuery スクロール バー プラグイン nanoscroller 使用ガイド_jquery
Web サイトで情報を表示する際、情報量が多すぎる場合の解決策は主に 3 つあります。 1. ページング、ページ内の情報を表示します。 2. ページ全体が表示されますが、ページが長すぎるため、閲覧エクスペリエンスに影響します。 3. スクロール バーを使用しますが、デフォルトのスクロール バー スタイルは単一すぎて、ユーザー エクスペリエンスが不親切です。したがって、スクロールバーを美しくする必要があります。
スクロール バーを美しくする最も簡単な方法は、jquery プラグインを使用することです。この記事では、jquery プラグインのスクロール バー プラグイン nanoscroller を紹介します。
公式表示、スタイルはカスタマイズ可能
1. nanoscroller プラグイン関数
コンテンツのスクロール機能を実装します
2.nanoscroller 公式アドレス
http://jamesflorentino.github.io/nanoScrollerJS/
3. nanoscroller の使用方法
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>
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。