Scrollbalken verstecken wie ein Profi: Benutzererfahrung verbessern

Einführung

In diesem Lab werden wir das Konzept des Ausblendens von Scrollbalken auf einem Element untersuchen, während es dennoch scrollbar bleibt, indem wir CSS verwenden. Wir werden die Eigenschaft overflow: auto verwenden, um das Scrollen zu aktivieren, und scrollbar-width: none um Scrollbalken in Firefox auszublenden, und display: none auf dem Pseudo-Element ::-webkit-scrollbar, um Scrollbalken in WebKit-Browsern auszublenden. In diesem Lab erhalten Sie praktische Erfahrungen bei der Implementierung dieser CSS-Technik, um die Benutzererfahrung auf scrollbaren Elementen zu verbessern.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/CodingStandardsandBestPracticesGroup(["Coding Standards and Best Practices"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") css/CodingStandardsandBestPracticesGroup -.-> css/comments("Comments") subgraph Lab Skills css/selectors -.-> lab-35209{{"Scrollbalken ausblenden"}} css/width_and_height -.-> lab-35209{{"Scrollbalken ausblenden"}} css/display_property -.-> lab-35209{{"Scrollbalken ausblenden"}} css/pseudo_elements -.-> lab-35209{{"Scrollbalken ausblenden"}} css/comments -.-> lab-35209{{"Scrollbalken ausblenden"}} end

Scrollbalken ausblenden

index.html und style.css wurden bereits in der VM bereitgestellt.

Um ein Element scrollbar zu machen, während die Scrollbalken ausgeblendet werden, folgen Sie diesen Schritten:

Verwenden Sie overflow: auto, um das Scrollen auf dem Element zu aktivieren.
Verwenden Sie scrollbar-width: none, um die Scrollbalken in Firefox auszublenden.
Verwenden Sie display: none auf dem Pseudo-Element ::-webkit-scrollbar, um die Scrollbalken in WebKit-Browsern (wie Chrome, Edge und Safari) auszublenden.

Hier ist eine Beispiel-Implementierung:

<div class="scrollable">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum id
    leo a consectetur. Integer justo magna, ultricies vel enim vitae, egestas
    efficitur leo. Ut nulla orci, rutrum eu augue sed, tempus pellentesque quam.
  </p>
</div>

.scrollable {
  width: 200px;
  height: 100px;
  overflow: auto;
  scrollbar-width: none;
}

/* Scrollbalken in WebKit-Browsern ausblenden */
.scrollable::-webkit-scrollbar {
  display: none;
}

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Scrollbalken ausblenden" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.