Google Docs-style scrollbar

styling-scrollbar.css

// Override webkit browsers' default scrollbar styles

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}

::-webkit-scrollbar-track-piece {
  background-clip: padding-box;
  background-color: #f5f5f5;
  border: solid #fff;
  border-width: 0;
  box-shadow: inset 1px 0 0 rgba(0,0,0,.14), inset -1px 0 0 rgba(0,0,0,.07);
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, .2);
  background-clip: padding-box;
  border: solid transparent;
  border-width: 0;
  min-height: 28px;
  padding: 100px 0 0;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
}