How to set css scroll bar

With the continuous development of web pages, user preferences are also gradually changing. It is precisely because of these changes that many websites are gradually updating their design styles, and one of the indispensable elements is the scroll bar. It has to be said that scroll bars have become an essential design element for many websites. In CSS, the style of scroll bars can be achieved through a series of CSS selectors. Let’s analyze in detail how to set CSS scroll bars.

What is a scroll bar?

Before introducing how to set scroll bars, we first need to understand what scroll bars are.

The scroll bar is an interactive component that we often use. It often appears in the sidebar, frame or containing area of ​​a web page. Use scroll bars to easily scroll content within a smaller area to see the entire content. Generally speaking, scroll bars are divided into two types: horizontal scroll bars and vertical scroll bars, of which vertical scroll bars are the most commonly used one.

In CSS, we can easily customize our own scroll bar style. Next, we will introduce how to set up CSS scroll bars one by one.

How to set a pure CSS scroll bar

To set a CSS scroll bar, you need to use ::-webkit-scrollbar and ::-webkit-scrollbar-thumbSelector. Below, we will analyze their usage respectively.

::-webkit-scrollbarSelector

::-webkit-scrollbarThe selector allows you to style the scroll bar container, including Scroll bar background color, height, width, etc. For example, using the ::-webkit-scrollbar selector, we can set the entire scrollbar to gray:

::-webkit-scrollbar {
  background-color: #eee;
  width: 8px;
}

The above code defines a scrollbar with a width of 8 pixels container and set its background to light gray.

We can also use CSS pseudo-classes to customize the status of the scroll bar, such as: scroll bar hovering, scroll bar clicked, etc. For example, the following code changes the scroll bar color to red when the mouse is hovering over it:

::-webkit-scrollbar:hover {
  background-color: #f00;
}

::-webkit-scrollbar-thumbSelector

In the ::-webkit-scrollbar selector, we have defined the style of the scroll bar, but the appearance of the scroll bar is still the default style, which is relatively monotonous. At this time, we need to use the ::-webkit-scrollbar-thumb selector to set the style of the scroll bar thumb (thumb).

Here is an example of setting the thumb style:

::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 4px;
}

This code defines a gray background and 4-pixel rounded corners for the scroll bar thumb.

In addition to setting the color and rounded corners, we can also further beautify the appearance of the scroll bar by setting shadows, borders, etc.:

::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.1);
  border: 1px solid #d8d8d8;
}

The above code defines a scroll bar with borders and shadow effects scrollbar thumb.

How to set a CSS scroll bar that is compatible with the entire network

Although we have introduced how to set a pure CSS scroll bar above, this method can only take effect on browsers with Webkit kernel (for example: Chrome, Safari, etc.). For other browsers (such as Firefox, Edge, etc.), JavaScript is required to achieve similar effects.

Fortunately, some third-party CSS libraries have provided us with solutions in this regard. For example, we can use the mCustomScrollbar CSS library to easily implement cross-browser custom scroll bars.

First, introduce the mCustomScrollbar CSS file:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />

Then, where you need to apply the custom scroll bar, introduce the following two files:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

Next, in JavaScript In the code, use the following code to initialize mCustomScrollbar:

$(document).ready(function () {
  $(".content").mCustomScrollbar();
});

The above code will apply mCustomScrollbar to the element with class content, and can take effect in various browsers.

At the same time, mCustomScrollbar also supports some advanced customization options, such as: scroll bar width, scroll bar color, scroll bar behavior, etc. These options can be set in the initialization function:

$(".content").mCustomScrollbar({
  theme: "dark",
  scrollbarPosition: "inside",
  axis: "y",
  scrollInertia: 500
});

The above code defines a black theme, an internal vertical scroll bar, and a scroll bar effect of 500 milliseconds.

Summary

In this article, we have explained in detail the use of CSS to customize scroll bars. We implement custom scroll bars in different browsers by introducing the ::-webkit-scrollbar and ::-webkit-scrollbar-thumb selectors and the mCustomScrollbar library. Therefore, when designing a web page, you may wish to customize a scroll bar effect that is better than the default scroll bar according to your design needs.

The above is the detailed content of How to set css scroll bar. For more information, please follow other related articles on the PHP Chinese website!