如何用HTML、CSS或JavaScript自定义网站滚动条（不修改浏览器全局滚动条）

Got it, let's walk through building a custom scrollbar for your specific site section—no changes to the browser's default scrollbar, just the polished, modern style you're aiming for. Here's a step-by-step breakdown with complete code:

1. Finalize the Scrollable Layout #

First, let's finish your base layout code. The key here is making sure your content container has overflow-y: auto so the scrollbar triggers when content exceeds the container height.

<div class="Stack_main-section">
  <div class="Stack_content">
    <!-- Your long content goes here -->
    <p>Lorem ipsum dolor sit amet... (repeat to fill the container)</p>
  </div>
</div>

.Stack_main-section {
  height: 40rem;
  border: .1rem solid lightgray;
  display: flex;
  /* Optional: Add padding to give space around the scrollable area */
  padding: 1rem;
}

.Stack_content {
  padding: 1.5rem;
  flex: 1;
  /* Enable vertical scrolling when content overflows */
  overflow-y: auto;
  /* Hide horizontal scrollbar if not needed */
  overflow-x: hidden;
}

2. Add Custom Scrollbar Styles (WebKit Browsers) #

WebKit-based browsers (Chrome, Edge, Safari) support pseudo-elements to style scrollbars directly. We'll replicate the clean, subtle style from the reference demo:

/* Target the scrollbar container */
.Stack_content::-webkit-scrollbar {
  width: 8px; /* Narrow scrollbar, matches modern UI */
}

/* Style the scrollbar track (background) */
.Stack_content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px; /* Rounded corners for smooth look */
}

/* Style the scrollbar thumb (draggable part) */
.Stack_content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
  transition: background 0.2s ease; /* Smooth hover effect */
}

/* Hover state for the thumb */
.Stack_content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8; /* Darken on hover for interactivity */
}

/* Active state (when dragging) */
.Stack_content::-webkit-scrollbar-thumb:active {
  background: #888;
}

3. Add Firefox Compatibility #

Firefox uses separate properties to style scrollbars. Add these lines to ensure consistency across browsers:

.Stack_content {
  /* Firefox: Set scrollbar width and color */
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}

4. Key Notes for Polish #

• Keep it subtle: Avoid overly flashy scrollbars—stick to neutral tones that match your site's design system, just like the reference demo.
• Performance: These styles are lightweight and won't impact page performance, since they're native browser pseudo-elements/properties.
• Responsiveness: The scrollbar width is set in px, but you can use rem if you want it to scale with your site's font size.

5. Full Working Code #

Here's all the code combined for easy implementation:

<!DOCTYPE html>
<html>
<head>
  <style>
    .Stack_main-section {
      height: 40rem;
      border: .1rem solid lightgray;
      display: flex;
      padding: 1rem;
    }

    .Stack_content {
      padding: 1.5rem;
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: thin;
      scrollbar-color: #c1c1c1 #f1f1f1;
    }

    .Stack_content::-webkit-scrollbar {
      width: 8px;
    }

    .Stack_content::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4px;
    }

    .Stack_content::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 4px;
      transition: background 0.2s ease;
    }

    .Stack_content::-webkit-scrollbar-thumb:hover {
      background: #a8a8a8;
    }

    .Stack_content::-webkit-scrollbar-thumb:active {
      background: #888;
    }
  </style>
</head>
<body>
  <div class="Stack_main-section">
    <div class="Stack_content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>Repeat the above paragraph multiple times to fill the container and trigger the scrollbar...</p>
      <!-- Add more content here -->
    </div>
  </div>
</body>
</html>

This will give you a custom scrollbar that only applies to the .Stack_content element, leaving the browser's default scrollbar untouched for other parts of the site. Adjust the colors, border-radius, and width to match your company's brand guidelines!

内容的提问来源于stack exchange，提问作者Wovasteen Gova