Question

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

我几乎已经破解了它，但我不太明白为什么我无法按照我想要的方式得到它。

这是我到目前为止所拥有的codepen ...如果位置设置为absolute，则淡入淡出（示例中为红色），但设置为{时失败{1}} - 这就是我需要的。

Answer 1

将淡出效果附加到.artist__media而不是.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;
  }
}

请参阅fiddle。那是你想要的吗？

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

1 个答案: