create scrollable content with sticky gradient overlay on top and bottom

gradient-overflow.less

.gradient-overflow(@size: 24px, @color: white) {
  // content will scroll if not enough space
  overflow-y: auto;

  // add a sticky gradient to the top and bottom of content
  // it'll overlay over content if needed
  &:before,
  &:after {
    content: '';
    display: block;
    position: sticky;
    z-index: 1;
    left: 0;
    height: @size;
    // clicks/touches will go through them
    pointer-events: none;
  }

  &:before {
    top: 0;
    background: linear-gradient(to bottom, @color, transparent);
  }

  &:after {
    bottom: 0;
    background: linear-gradient(to top, @color, transparent);
  }
}