Hide Scroll Bars

Introduction

In this lab, we will explore the concept of hiding scrollbars on an element while still allowing it to be scrollable using CSS. We will use the overflow: auto property to enable scrolling, and scrollbar-width: none to hide scrollbars on Firefox, and display: none on the ::-webkit-scrollbar pseudo-element to hide scrollbars on WebKit browsers. This lab will provide a hands-on experience in implementing this CSS technique to improve user experience on scrollable elements.

Skills Graph

Hide Scroll Bars

index.html and style.css have already been provided in the VM.

To allow an element to be scrollable while hiding the scrollbars, follow these steps:

• Use overflow: auto to enable scrolling on the element.
• Use scrollbar-width: none to hide the scrollbars on Firefox.
• Use display: none on the ::-webkit-scrollbar pseudo-element to hide the scrollbars on WebKit browsers (such as Chrome, Edge, and Safari).

Here's an example implementation:

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

/* Hide scrollbars on WebKit browsers */
.scrollable::-webkit-scrollbar {
  display: none;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Hide Scroll Bars lab. You can practice more labs in LabEx to improve your skills.