How to Create a Custom Scrollbar with Reduced Height in Web Development?

How to Adjust Scrollbar Height

In this instance, we're discussing customizing the appearance of scrollbars, specifically by adjusting their height. To accomplish this, we'll need to understand the structure of a scrollbar, which is illustrated below:

<code class="css">::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }</code>

The goal is twofold: to modify where the scrollbar thumb (5) begins and ends scrolling, and to create an artificial scroll track in place of the existing track (3). Utilizing CSS, these modifications can be implemented as follows:

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

This code creates a fake scrollbar that appears shorter than the actual scrollbar, giving the illusion of a height adjustment. The ::-webkit-scrollbar-track element is used to hide the original scrollbar, while the ::after pseudo-element creates the fake scrollbar. The ::-webkit-scrollbar-thumb element is styled to resemble a shorter scrollbar thumb. By adjusting the margin-top and margin-bottom properties of the ::-webkit-scrollbar-track-piece elements, the starting and ending points of the scrollbar thumb can be modified.

This code will effectively shorten the appearance of the scrollbar, providing a customized visual experience.

The above is the detailed content of How to Create a Custom Scrollbar with Reduced Height in Web Development?. For more information, please follow other related articles on the PHP Chinese website!