Hackforge Academy

Explanation

A scrollbar is used when content overflows its container. It allows users to scroll and view hidden content instead of expanding the layout. This is important for better user experience, fixed layouts, dashboards, and preventing UI breaking when large content is loaded.

Code:

/* Basic scrollbar using CSS */
.container {
  width: 300px;
  height: 200px;
  overflow: auto; /* adds scrollbar 
when needed */
  border: 1px solid #ccc;
}

/* Example HTML */
<div class="container">
  <p>Lots of content here...</p>
  <p>More content...</p>
  <p>More content...</p>
  <p>More content...</p>
</div>

Explanation

You can force a scrollbar even if content is small using overflow: scroll. This ensures layout consistency (e.g., tables, dashboards).

Code:

.container {
  width: 300px;
  height: 200px;
  overflow: scroll; 
/* always show scrollbar */
}

Explanation

You can create vertical or horizontal scrollbars using overflow-y and overflow-x. This is useful when you want only one direction scroll.

Code:

.container {
  width: 300px;
  height: 200px;
/* vertical scroll */
  overflow-y: scroll;
 /* no horizontal scroll */ 
  overflow-x: hidden;
}

Explanation

In Tailwind CSS, scrollbars can be added using utility classes like overflow-auto, overflow-scroll, overflow-y-scroll. This is useful in modern frontend frameworks like React.

Code:

<div class="w-72 h-48 overflow-auto border">
  <p>Scrollable content...</p>
  <p>More content...</p>
</div>

Explanation

Custom scrollbar styling improves UI/UX. You can style scrollbar using WebKit properties (Chrome, Edge, Safari).

Code:

/* Custom scrollbar */
.container::-webkit-scrollbar {
  width: 8px;
}

.container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.container::-webkit-scrollbar-thumb:hover {
  background: #555;
}