Problem description

Google chrome’s own scrollbar style is not very nice. So sometimes you might want to change the style. In this paper, vUE project as an example, for the use of webKit kernel browser, the corresponding browser scrollbar style control is effective.

Introduction to browser kernel

The browser kernel engine is basically divided into three parts:

  • WebKit kernel: Google Chrome, Safari, Marpride 3, Cheetah browser, Baidu browser, Opera browser, etc., are all based on WebKit development (Edge browser also supports CSS syntax below)
  • Gecko kernel: Firefox is developed based on Gecko
  • Trident kernel: IE is developed based on Trident

code

The code shown

Code attached

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  <style>
    /* Only works with WebKit browsers */
    /* Defines the width of the scroll bar and the scroll bar track */
    ::-webkit-scrollbar {
      width: 15px;
      /* height: 100px; I don't have to define the height of the scrollbar because the height is adaptive to the content
    }

    /* Define scrollbar inner shadow + rounded corner */
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0.0.0.3);
      background-color: pink;
    }

    /* Define the inner shadow of the scroll bar slide track + rounded */
    ::-webkit-scrollbar-track {
      border-radius: 4px;
      background-color: #bfa;
    }

    /* Mouse over effect */
    ::-webkit-scrollbar-thumb:hover {
      background: #baf;
    }

  </style>
</head>
<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <! -- built files will be auto injected -->
</body>
</html>
Copy the code

Renderings are attached

Similarly, if you want to change the style of a div, just add the webKit pseudo-element above to the name of the class, such as changing the scrollbar style of a div with the class name box

.box::-webkit-scrollbar  {
  width: 9px;
}
.box::-webkit-scrollbar-thumb  {
  background-color: red;
  border-radius: 8px;
}
.box::-webkit-scrollbar-thumb:hover {
  background: #baf;
}
Copy the code

For example, let’s change the style of the vertical scroll bar of el-Table in ele. me UI

// Table slider /deep/.el-table__body-wrapper::-webkit-scrollbar  {
  width: 9px; } // The slider of the scroll bar /deep/.el-table__body-wrapper::-webkit-scrollbar-thumb  {
  background-color: #ddd;
  border-radius: 8px;
}
Copy the code

conclusion

A good memory is better than a bad pen. Write it down

Finally, an introduction to ::- webkit-ScrollBar from the MDN documentation is attached. The portals are as follows:

developer.mozilla.org… ::-webkit-scrollbar