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>

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。