Guide d'utilisation du plug-in de barre de défilement jQuery nanoscroller_jquery

Lorsque le site Web affiche des informations, si la quantité d'informations est trop importante, il existe trois solutions principales. 1. Pagination, affichage des informations dans les pages. 2. La page entière s'affiche, mais la page est trop longue, ce qui affecte l'expérience de navigation. 3. Utilisez des barres de défilement, mais le style de barre de défilement par défaut est trop simple et l'expérience utilisateur n'est pas conviviale. Nous devons donc embellir la barre de défilement.

Le moyen le plus simple d'embellir la barre de défilement est d'utiliser le plug-in jquery. Cet article présente le plug-in de barre de défilement nanoscroller dans le plug-in jquery.

Affichage officiel, le style peut être personnalisé

1. Fonction du plug-in nanoscroller

Implémenter la fonction de défilement du contenu

2.adresse officielle de nanoscroller

http://jamesflorentino.github.io/nanoScrollerJS/

3. Comment utiliser le nanoscroller

1. Fichiers de référence

<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. Définir le style de la barre de défilement

.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. Faites défiler le contenu affiché

<div id="about" class="nano">
 <div class="content"> 
   滚动显示的内容
  </div>
</div>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.