How to modify the default scroll bar style with css-CSS Tutorial-php.cn

How to modify the default scroll bar style with css

王林

Release： 2020-03-17 10:58:08

forward

2395 people have browsed it

How to modify the default scroll bar style with css

Foreword:

Many projects need to change the default style of the scroll bar, and do not want to download and introduce plug-ins separately.

Modification method: (Recommended tutorial: CSS Getting Started Tutorial)

            &::-webkit-scrollbar {
              // 滚动条的背景
              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 {
              //滚动条的滑块样式修改
              width: 20px;
              min-height: 20px;
              background-clip: content-box;
              box-shadow: 0 0 0 5px #464f70 inset;
            }

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

Copy after login

Simplified code:

            &::-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);
            }

Copy after login

The advantage of this is that it will only be displayed when the mouse is moved over it Modified scrollbars.

How to write the code to hide the scroll bar of an axis:

overflow-x:hidden;

Copy after login

Related video tutorial sharing: css video tutorial

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