ScrollBar:hover w/ mask-image

by Sebastian Kay

HTML

<div class="content">
<div class="LeftNav_scrollable">
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
    <li>Latte</li>
    <li>Flat White</li>
    <li>Cortado</li>
    <li>Americano</li>
    <li>Long Black</li>
    <li>Espresso</li>
  </ul>
</div>
</div>

CSS

/**
 * The issue with this is that it does not support transparent track :/
 * scrollbar css does not support transitions, so to go around this we are using a mask-image. The
 * mask covers the scrollbar using the width of the scrollbar and a super-tall, arbitrary height
 * of 20000px. When the user hovers over the content, the mask is transitioned away from
 * scrollbar.
 */

/**
 * show thumb on hover
 * no transition
 * overlay is deprecated, but then transparent trackbar works
 */ 

body {
  background-color: antiquewhite;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.content {
  margin: -17px 0 0 0;
  padding: 0;
  width: 100%;
  height: calc(100% + 17px);
  overflow-y: scroll;
  overflow-x: hidden;
  mask-image: linear-gradient(to top, transparent, black),
    linear-gradient(to left, transparent 17px, black 17px);
  mask-size: 100% 20000px;
  mask-position: left bottom;
  -webkit-mask-image: linear-gradient(to top, transparent, black),
    linear-gradient(to left, transparent 17px, black 17px);
  -webkit-mask-size: 100% 20000px;
  -webkit-mask-position: left bottom;
  transition: mask-position 0.3s, -webkit-mask-position 0.3s;
}
.LeftNav_scrollable {
	width: 100%;
	height: 2000px;
	background-color:#ff00ff;
}

.content::-webkit-scrollbar-thumb {
  transition: background-color 0.3s;
  -webkit-transition: background-color 0.3s;
  background-color: rgba(255, 255, 255, 0);
  border-radius: 50px;
}

.content:hover {
  -webkit-mask-position: left top;
}

JavaScript

// https://css-tricks.com/scrollbars-on-hover/