【问题标题】:How to create a fade effect in a horizontal scrolling div如何在水平滚动的 div 中创建淡入淡出效果
【发布时间】:2018-05-04 05:56:24
【问题描述】:

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

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

这是我到目前为止所拥有的codepen...如果将位置设置为absolute,则淡入淡出(为了示例而为红色)效果很好,但在设置为fixed 时会失败 - 这是我需要的。

CodePen link

【问题讨论】:

  • 我可以想到一个方法:在你的“内容”div 顶部添加一个 div 并淡化它的背景。但问题是您将无法点击任何内容,因为“推子”div 位于顶部。

标签: html css sass


【解决方案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。 这是你想要的吗?

【讨论】:

    猜你喜欢
    • 2021-10-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-25
    • 1970-01-01
    • 2012-03-15
    • 1970-01-01
    相关资源
    最近更新 更多