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