Css3 can customize the scrollbar style, today found a fancy gameplay, let’s see? I’ve written a web page before and I’ve written a scroll bar that looks like this

CSS code is provided

body {
  background: #06b0b9;
}
::-webkit-scrollbar {
        width: 10px;
        height: 1px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: none;
  background: hsl(183, 97%, 27%);
  -webkit-box-shadow: none;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: none;
  border-radius: 10px;
  background: #06b0b9;
  -webkit-box-shadow: none;
}
Copy the code

Check compatibility table, compatibility I don’t say what (valley big guy)(this table I want to delete)

More,,,

See officer hint, Firefox IE not, pro test Firefox really not, that ya does not support,

body { scrollbar-arrow-color: #06b0b9; /* The color of the triangle arrow */ scrollbar-face-color: HSL (183, 97%, 27%); */ scrollbar-3dlight-color: #06b0b9; /* Scrollbar-highlight-color: #06b0b9; /* Highlight color of scroll bar (left shadow?) */ scrollbar-shadow-color: #06b0b9; /* Scrollbar -darkshadow-color: #06b0b9; /* Scrollbar-track-color: #06b0b9; /* scrollbar-base-color: #06b0b9; /* Base color of scroll bar */}Copy the code

How did you spend valentine’s Day yesterday

body,
html {
  width: 100vw;
}

body {
  /* background: #06b0b9; */
  background: url(01.jpg) no-repeat center;
  background-size: 100% 100%;
}

::-webkit-scrollbar {
  width: 10px;
  height: 1px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: hsl(183, 97%, 27%);
  -webkit-box-shadow: none;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0);
  -webkit-box-shadow: none;
}
Copy the code

Please look at the officer more and correct. It is to think of a way of thinking and share it, no other meaning, I think talent is average, so you must have high martial arts skills, talent is smart, hope to tap brick