Scss mixins for custom scrollbar and no scrollbar

scrollbar.scss

// custom scroll-bar
@mixin custom-scroll-bar() {
  &::-webkit-scrollbar {
    border-radius: 10px;
    height: 10px;
    width: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 10px;
  }

  &::-webkit-scrollbar-track {
    border-radius: 10px;
  }
}

// no scroll bar
@mixin no-scroll-bar() {
  &::-webkit-scrollbar {
    height: 0;
    width: 0;
  }

  &::-webkit-scrollbar-thumb {
    height: 0;
    width: 0;
  }

  &::-webkit-scrollbar-track {
    height: 0;
    width: 0;
  }
}

This helps a lot! Thanks :)

thanks! it works great! :D

Thank you very much!

Thank you!

what is the purpose of setting height e.g. as 10px? Haven't notice any difference

what is the purpose of setting height e.g. as 10px? Haven't notice any difference

@kolkol69 it is for horizontal scrolling.

Thanks, this helps for the -webkit- versions but not the -ms- versions, while I'm also not sure about the rest. Anyway to write this out for these other browser?

Thank you! This helped a lot

thanks ;)