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

MySQL character types are case sensitive

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

MySQL character types are case sensitive

How to Enable or Disable Linux Services Using chkconfig and systemctl Commands

Do you know the common MySQL design errors?

Detailed explanation of Docker basic network configuration

Detailed explanation of the infinite restart problem when running the SpringBoot project docker environment

Common symbols in Unicode

Detailed examples of replace and replace into in MySQL into_Mysql

Mobile development tutorial: Summary of pixel display issues

How to modify the master-slave replication options in MySQL online

Steps to run ASP.NET Core in Docker container

Recommend

Detailed example of MySQL exchange partition

TypeScript Enumeration Type

Solution to the problem that input in form cannot be submitted when disabled

Sharing experience on the priority of CSS style loading

Example code of CSS layout at both ends (using parent's negative margin)

Vue makes div height draggable

JavaScript imitates the complete page implementation process of Xiaomi Mall official website

Summary of Linux date command knowledge points

js to write the carousel effect

Logrotate implements Catalina.out log rotation every two hours

The solution to the problem that the web table or div layer is stretched in the web page

Common methods and problems of Docker cleaning

docker logs - view the implementation of docker container logs

12 Javascript table controls (DataGrid) are sorted out

Detailed steps to deploy lnmp under Docker