How to style css of scrollbar at the root level?-CodePudding

body {
  overflow-y: scroll;
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb-color);
    border-radius: 5px;
  }
  ::-webkit-scrollbar-track {
    background-color: var(--scroll-back-color);
    width: 5px;
  }
}

The styles placed at the body, as above, has no effect on the top level scrollbar.

How to fix it?

CodePudding user response：

Your selectors don't seem to be correct.

If you're using SASS it should be:

body {
  &::-webkit-scrollbar {
    width: 10px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb-color);
    border-radius: 5px;
  }

  &::-webkit-scrollbar-track {
    background-color: var(--scroll-back-color);
    width: 5px;
  }
}

or if you're using plain CSS:

body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb-color);
  border-radius: 5px;
}

body::-webkit-scrollbar-track {
  background-color: var(--scroll-back-color);
  width: 5px;
}