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

Detailed explanation of mysql trigger example

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

Detailed explanation of mysql trigger example

Summary of common docker commands

HTML table tag tutorial (11): horizontal alignment attribute ALIGN

The perfect solution to the Chinese garbled characters in mysql6.x under win7

Vue implements form data validation example code

Detailed explanation of 8 ways to pass parameters in Vue routing components

Introduction to Docker Quick Deployment of SpringBoot Project

The shortest JS to determine whether it is IE6 (IE writing method)

Several popular website navigation directions in the future

A Deeper Look at SQL Injection

Recommend

Summary of nginx configuration location method

Detailed explanation of non-parent-child component communication in Vue3

JS realizes the scrolling effect of announcement online

JavaScript to achieve simple drag effect

Sharing of design ideas for the official website of Navigation Century

CSS3 implements horizontal centering, vertical centering, horizontal and vertical centering example code

MySQL implements multi-table association statistics (subquery statistics) example

Quick solution for forgetting MySQL8 password

Solve the problem of margin merging

Modify file permissions (ownership) under Linux

Introduction to the use of the four major sql ranking functions ROW_NUMBER, RANK, DENSE_RANK, NTILE

How to deploy your first application with Docker

HTML Tutorial: Collection of commonly used HTML tags (4)

Example of using swiper plugin to implement carousel in Vue

Detailed explanation of the working principle and solution of Js modularization