Modify the default scroll bar style in the front-end project (summary)

Modify the default scroll bar style in the front-end project (summary)

I have written many projects that require changing the default style of the scroll bar, and I don’t want to download and introduce plug-ins separately. Therefore, I modify the style of the default scroll bar purely with CSS. This time I will unify the methods and directly post the code.

            &::-webkit-scrollbar {
              //Scrollbar background width: 16px;
              background: #191a37;
              height: 14px;
            }

            &::-webkit-scrollbar-track,
            &::-webkit-scrollbar-thumb {
              border-radius: 999px;
              width: 20px;
              border: 5px solid transparent;
            }

            &::-webkit-scrollbar-track {
              box-shadow: 1px 1px 5px #191a37 inset;
            }

            &::-webkit-scrollbar-thumb {
              //Modify the scroll bar slider style width: 20px;
              min-height: 20px;
              background-clip: content-box;
              box-shadow: 0 0 0 5px #464f70 inset;
            }

            &::-webkit-scrollbar-corner {
              background: #191a37;
            }

This is a pretty complete modification.

The one below is very concise. Worth a try

            &::-webkit-scrollbar {
              width: 6px;
              height: 6px;
              background: transparent;
            }

            &::-webkit-scrollbar-thumb {
              background: transparent;
              border-radius: 4px;
            }

            &:hover::-webkit-scrollbar-thumb {
              background: hsla(0, 0%, 53%, 0.4);
            }

            &:hover::-webkit-scrollbar-track {
              background: hsla(0, 0%, 53%, 0.1);
            }

The advantage of this is that the modified scroll bar will be displayed only when the mouse is moved, which is a good experience

(Prompt the code to hide the scroll bar of a certain axis)

overflow-x:hidden;

I thought it was none before, and it didn't change for a long time.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  Detailed graphic explanation of mysql query control statements

>>:  Web Design Help: Web Font Size Data Reference

Recommend

Detailed process record of Vue2 initiating requests using Axios

Table of contents Preface Axios installation and ...

How to install and configure the supervisor daemon under centos7

Newbie, record it yourself 1. Install supervisor....

In-depth understanding of uid and gid in docker containers

By default, processes in the container run with r...

Detailed explanation of invisible indexes in MySQL 8.0

Word MySQL 8.0 has been released for four years s...

Brief Analysis of MySQL B-Tree Index

B-Tree Index Different storage engines may also u...

Web page production TD can also overflow hidden display

Perhaps when I name this article like this, someon...

Vue implements login jump

This article example shares the specific code of ...

Solve the problem that await does not work in forEach

1. Introduction A few days ago, I encountered a p...

MySQL 5.6 installation steps with pictures and text

MySQL is an open source small relational database...

How to control the proportion of Flex child elements on the main axis

background Flex layout achieves alignment and spa...

Detailed example of MySQL (5.6 and below) parsing JSON

MySQL (5.6 and below) parses json #json parsing f...

Implementation of docker-compose deployment project based on MySQL8

1. First, create the corresponding folder accordi...