So fügen Sie eine Bildlaufleiste in JQuery hinzu-Front-End-Fragen und Antworten-php.cn

So fügen Sie eine Bildlaufleiste in JQuery hinzu

王林

Freigeben： 2023-05-14 10:33:37

Original

753 Leute haben es durchsucht

Mit der kontinuierlichen Weiterentwicklung von Webseiten werden die anzuzeigenden Inhalte immer komplexer. Manchmal sind die anzuzeigenden Inhalte größer als das Browserfenster. Zu diesem Zeitpunkt müssen wir Bildlaufleisten verwenden. Mit Bildlaufleisten können wir eine große Menge an Inhalten in einem begrenzten Fenster durchsuchen, ohne uns Gedanken über einen Inhaltsüberlauf machen zu müssen. jQuery ist eine leistungsstarke JavaScript-Bibliothek, die die Funktion der Bildlaufleiste problemlos implementieren kann. In diesem Artikel wird erläutert, wie Sie mit jQuery Bildlaufleisten zu Webseiten hinzufügen.

Was ist das jQuery-Bildlaufleisten-Plugin?

jQuery-Bildlaufleisten-Plugin ist ein JavaScript-Plugin zum Hinzufügen von Bildlaufleisten zu Webseiten. Es ermöglicht Benutzern das einfachere Durchsuchen von Seiten, wenn mehr Inhalte vorhanden sind, und kann an verschiedene Webdesigns angepasst werden. Es gibt viele Arten von jQuery-Bildlaufleisten-Plug-ins. Die am häufigsten verwendeten sind jQuery NiceScroll, mCustomScrollbar und PerfectScrollbar.

Verwenden von jQuery NiceScroll zum Implementieren von Bildlaufleisten

In diesem Artikel verwenden wir das jQuery NiceScroll-Plugin zum Implementieren von Bildlaufleisten. Es handelt sich um ein leistungsstarkes Bildlaufleisten-Plugin, das leicht an verschiedene Webdesigns angepasst werden kann. Hier sind einige Schritte zum Hinzufügen von Bildlaufleisten zu einer Webseite mithilfe des jQuery NiceScroll-Plugins.

1. Einführung des jQuery- und jQuery-NiceScroll-Plug-ins

Zuerst müssen Sie jQuery und das jQuery-NiceScroll-Plug-in vorstellen. Fügen Sie in Ihrer HTML-Datei den folgenden Code hinzu:

<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>

Nach dem Login kopieren

2. Definieren Sie Ihren Seiteninhalt

Definieren Sie in Ihrer HTML-Datei Ihren Seiteninhalt. Im folgenden Beispiel richten wir mithilfe von CSS eine feste obere Navigationsleiste ein.

<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>

Nach dem Login kopieren

3. Richten Sie das jQuery NiceScroll-Plugin ein

Initialisieren Sie das jQuery NiceScroll-Plugin mit dem folgenden Code:

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

Nach dem Login kopieren

In diesem Code verwenden wir den jQuery-Selektor, um das gesamte HTML-Dokument auszuwählen und rufen die Methode niceScroll() auf, wenn das Dokument ist fertig.

4. Benutzerdefinierter Stil

Sie können CSS verwenden, um Ihre Bildlaufleiste anzupassen. Im Folgenden sind einige häufig verwendete CSS-Stile aufgeführt, mit denen Sie die Farbe, Breite, Höhe und andere Eigenschaften der Bildlaufleiste festlegen können:

::-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;
}

Nach dem Login kopieren

5. Zusätzlich zur Grundinitialisierung können Sie auch andere Optionen festlegen B. Bildlaufgeschwindigkeit, Bildlaufleistenbreite, Bildlaufleistenrand usw. Hier sind einige häufig verwendete Optionen:

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

Nach dem Login kopieren

Zusammenfassung

In diesem Artikel haben wir behandelt, wie man mit dem jQuery NiceScroll-Plugin Bildlaufleisten zu einer Webseite hinzufügt. Mit jQuery NiceScroll können Sie den Stil der Bildlaufleiste einfacher an verschiedene Webdesigns anpassen. Denken Sie daran, dass Bildlaufleisten nur eine Möglichkeit sind, den Zugriff auf eine große Menge an Inhalten zu ermöglichen. Wo immer möglich, können Sie Bildlaufleisten zum Anzeigen von Inhalten verwenden und gleichzeitig sicherstellen, dass der Inhalt aussagekräftig und leicht lesbar ist, sodass Besucher leichter auf Ihrer Website navigieren können.

Das obige ist der detaillierte Inhalt vonSo fügen Sie eine Bildlaufleiste in JQuery hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!