如何在水平滚动 div 中创建淡入淡出效果

Sea*_*ean 7 html css sass

我正在创建音乐专辑的水平滚动 div,并希望在 div 的右侧淡入淡出以帮助传达列表水平滚动的信息。

我几乎破解了它,但不太明白为什么我不能完全按照我想要的方式得到它。

这是迄今为止我所拥有的代码笔......如果位置设置为,absolute但在设置为时失败fixed- 这就是我需要的淡入淡出(为了示例而为红色)完美工作。

代码笔链接

zor*_*dia 10

将淡入淡出附加到.artist__medianot to .content。像这样:

.artist__media {
  margin-top: 50px;
  position: relative;

  &:after {
      content: "";
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
      bottom: 15px;
      pointer-events: none;
      background-image: linear-gradient(to right, rgba(255,255,255,0), red 85%);
      width: 15%;
    }

  .content {
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    position: relative;
  }
}
Run Code Online (Sandbox Code Playgroud)

小提琴。那是你想要的吗?