Make scrollbars only visible when a Div is hovered over?

Question

I am trying to figure out how to have a scrollable div that only shows its scrollbars when Hovered.

Example is Google Image search, in the image below you can see

Answer 1

One trick for this, for webkit browsers, is to create an invisible scrollbar, and then make it appear on hover. This method does not affect the scrolling area width as the space needed for the scrollbar is already there.

Something like this:

body {
  height: 500px;
  &::-webkit-scrollbar {
    background-color: transparent;
    width: 10px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

body:hover {
  &::-webkit-scrollbar-thumb {
    background-color: black;
  }
}

.full-width {
  width: 100%;
  background: blue;
  padding: 30px;
  color: white;
}

some content here

does not change