Comment ajouter une barre de défilement dans jquery-Questions et réponses frontales-php.cn

Comment ajouter une barre de défilement dans jquery

王林

Libérer： 2023-05-14 10:33:37

original

753 Les gens l'ont consulté

Avec le développement continu des pages Web, le contenu à afficher devient de plus en plus complexe. Parfois, le contenu que nous devons afficher est plus grand que la fenêtre du navigateur. Pour le moment, nous devons utiliser des barres de défilement. Les barres de défilement nous permettent de parcourir une grande quantité de contenu dans une fenêtre limitée sans nous soucier du débordement de contenu. jQuery est une puissante bibliothèque JavaScript qui peut facilement implémenter la fonctionnalité de barre de défilement. Cet article explique comment utiliser jQuery pour ajouter des barres de défilement aux pages Web.

Qu'est-ce que le plugin de barre de défilement jQuery ?

Le plugin de barre de défilement jQuery est un plugin JavaScript permettant d'ajouter des barres de défilement aux pages Web. Il permet aux utilisateurs de parcourir les pages plus facilement lorsqu'il y a plus de contenu et peut être personnalisé pour s'adapter à différentes conceptions Web. Il existe de nombreux types de plug-ins de barre de défilement jQuery, parmi lesquels les plus couramment utilisés sont jQuery NiceScroll, mCustomScrollbar et PerfectScrollbar.

Utiliser jQuery NiceScroll pour implémenter des barres de défilement

Dans cet article, nous utiliserons le plugin jQuery NiceScroll pour implémenter des barres de défilement. Il s’agit d’un puissant plugin de barre de défilement qui peut être facilement personnalisé pour s’adapter à différentes conceptions Web. Voici quelques étapes pour ajouter des barres de défilement à une page Web à l'aide du plugin jQuery NiceScroll.

1. Présentez le plug-in jQuery et jQuery NiceScroll

Tout d'abord, vous devez introduire le plug-in jQuery et jQuery NiceScroll. Dans votre fichier HTML, ajoutez le code suivant :

<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
</head>

Copier après la connexion

2. Définissez le contenu de votre page

Dans votre fichier HTML, définissez le contenu de votre page. Dans l'exemple ci-dessous, nous avons configuré une barre de navigation supérieure fixe en utilisant CSS.

<body>
  <div class="navbar">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
  <div id="content">
    <h1>Lorem Ipsum</h1>
    <p>Some text here...</p>
  </div>
</body>

Copier après la connexion

3. Configurez le plugin jQuery NiceScroll

Initialisez le plugin jQuery NiceScroll en utilisant le code suivant :

<script>
  $(document).ready(function(){
    $("html").niceScroll();
  });
</script>

Copier après la connexion

Dans ce code, nous utilisons le sélecteur jQuery pour sélectionner l'intégralité du document HTML et appelons la méthode niceScroll() lorsque le le document est prêt.

4. Style personnalisé

Vous pouvez utiliser CSS pour personnaliser votre barre de défilement. Voici quelques styles CSS couramment utilisés qui peuvent être utilisés pour définir la couleur, la largeur, la hauteur et d'autres propriétés de la barre de défilement :

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #555555;
}

Copier après la connexion

5 Initialiser d'autres options

En plus de l'initialisation de base, vous pouvez également définir d'autres options. , tels que la vitesse de défilement, la largeur de la barre de défilement, la bordure de la barre de défilement, etc. Voici quelques options couramment utilisées :

$(document).ready(function(){
  $("html").niceScroll({
    cursorwidth: "10px",
    cursorborder: "none",
    cursorcolor: "black",
    background: "#f5f5f5",
    autohidemode: false,
    horizrailenabled: false,
    cursorfixedheight: 80,
  });  
});

Copier après la connexion

Résumé

Dans cet article, nous avons expliqué comment ajouter des barres de défilement à une page Web à l'aide du plugin jQuery NiceScroll. L'utilisation de jQuery NiceScroll vous permet de personnaliser plus facilement les styles de barre de défilement pour les adapter à différentes conceptions Web. N'oubliez pas que les barres de défilement sont simplement un moyen de donner accès à une grande quantité de contenu. Vous pouvez utiliser des barres de défilement pour afficher le contenu dans la mesure du possible, facilitant ainsi la navigation des visiteurs sur votre site, à condition que le contenu soit significatif et facile à lire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!