Can't click through the gradient on the "Overflow scroll gradient"

[cuth]

Overflow scroll gradient

This snippet adds a transparent-to-white gradient on top of a scrollable area giving the effect that the content is fading away. For the majority of the area underneath this content, a user would think it would still be able to interact with the content but the gradient would block any interaction.

TLDR

Buttons at the bottom of the scroll area are un-clickable. Text at the bottom of the scroll area is un-selectable.

The fix is to add pointer-events: none to the gradient:

.overflow-scroll-gradient {
  position: relative;
}
.overflow-scroll-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 300px;
  height: 25px;
  background: linear-gradient(rgba(255, 255, 255, 0.001), white); /* transparent keyword is broken in Safari */
  pointer-events: none;
}
.overflow-scroll-gradient__scroller {
  overflow-y: scroll;
  background: white;
  width: 300px;
  height: 250px;
  padding: 15px 0;
  line-height: 1.2;
  text-align: center;
}

Browser Support

https://caniuse.com/#search=pointer-events

[atomiks]

Waiting to be implemented here: #23
I can add it manually if he doesn't respond though

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for any follow-up tasks.