How can I customize the height of a scrollbar using CSS and HTML?

Customizing the Scrollbar Height

Controlling the Scrollbar Size

To modify the scrollbar's height, it's necessary to understand its structure. Reference the image below to visualize the scrollbar's components:

[Image of scrollbar structure]

To change the size, we'll focus on two aspects:

• Controlling where the scrollbar thumb (5) starts and stops scrolling
• Simulating a fake scroll track instead of using the default one (3)

Creating a Custom Scrollbar

Consider the following code:

CSS:

<code class="css">.page {
  position: relative;
  width: 100px;
  height: 200px;
}

.content {
  width: 100%;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px solid #ddd;
}

.page::after {
  content: '';
  position: absolute;
  z-index: -1;
  height: calc(100% - 20px);
  top: 10px;
  right: -1px;
  width: 5px;
  background: #666;
}

.wrapper::-webkit-scrollbar {
  display: block;
  width: 5px;
}

.wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.wrapper::-webkit-scrollbar-thumb {
  background-color: red;
  border-right: none;
  border-left: none;
}

.wrapper::-webkit-scrollbar-track-piece:end {
  background: transparent;
  margin-bottom: 10px;
}

.wrapper::-webkit-scrollbar-track-piece:start {
  background: transparent;
  margin-top: 10px;
}</code>

HTML:

<code class="html"><div class="page">
  <div class="wrapper">
    <div class="content">
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
    </div>
  </div>
</div></code>

This code:

• Defines a fake scroll track using the page element's after pseudo-element.
• Customizes the scrollbar's width, background, and thumb color using CSS properties applied to the wrapper element's scrollbar.
• Adds margins to the scrollbar's track pieces to control the scroll thumb's start and end points.

By implementing these changes, you can modify the scrollbar's height to meet your design requirements.

The above is the detailed content of How can I customize the height of a scrollbar using CSS and HTML?. For more information, please follow other related articles on the PHP Chinese website!