How to Force a Vertical Scrollbar to Always Appear in CSS?

How to Always Display Vertical Scroll Bar in CSS

In certain scenarios, you may want to ensure that a vertical scroll bar is always visible, even when a div's content doesn't extend beyond the visible area. By default, browsers hide scrollbars until the mouse hovers over an element.

To force a scrollbar to always display, add the following CSS:

:::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

The first line removes the default browser styling and the second line defines custom styling for the scrollbar thumb.

For example:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
  
  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
  }
}

The above is the detailed content of How to Force a Vertical Scrollbar to Always Appear in CSS?. For more information, please follow other related articles on the PHP Chinese website!