Prevent mask-img from masking scrollbar

Question

I've got a scrollable div with a mask to make the text fade towards the bottom. Problem: The scrollbar is also masked. How do I prevent that from happening under the assumption that I don't know the scrollbar size itself.

Bonus: How to make the gradient start at 50px from the bottom without using the old -webkit-gradient.

#content-wrapper {
  height: 150px;
  width: 200px;
  background-color: rgba(0, 0, 0, 0.2);
}

#content {
  height: 150px;
  width: 200px;
  color: white;
  overflow-y: scroll;
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
}

<div id="content-wrapper">
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec libero sodales, feugiat arcu consequat, faucibus orci. Integer facilisis felis id leo iaculis dapibus. Nulla facilisi. Suspendisse potenti. Mauris cursus, erat ut euismod tincidunt, leo magna ullamcorper felis, in blandit felis ipsum mattis ipsum. Suspendisse arcu risus, ultrices et purus sed, blandit molestie turpis. Fusce condimentum eros vitae purus tempus, in iaculis lorem molestie. Integer sagittis eros nec magna vehicula, ut ornare ante consequat. Donec volutpat arcu dui, id dignissim tortor dictum vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam venenatis nulla tellus, vitae vestibulum neque pharetra at. Proin vel posuere sem, nec porta augue. Morbi interdum lorem lorem. Mauris mollis euismod lobortis.
  </div>
</div>

Answer 1

It's possible to use multiple gradients in a mask. The first one will mask the content and the second gradient creates a non-masked area for the scrollbar.

#content {
  overflow-x: hidden;
  overflow-y: overlay; /* prevent the scrollbar from adding padding */

  mask-image:
    linear-gradient(rgba(0, 0, 0, 1), transparent), /* main content */
    linear-gradient(to left, black 5px, transparent 6px); /* not masked area for scrollbar */
  mask-size: 100% 100%;
  mask-position: 0 0, 100% 0;
  mask-repeat: no-repeat, no-repeat;
}

This works best when using a custom scrollbar.