html - 如何创建淡出滚动内容但不与滚动条重叠的 mask ？

Question

我有一个不是 body 元素的容器。这个容器是可滚动的。现在滚动时内容应该在顶部淡出。

这个容器本身定位在absolute。未提供标记和 CSS，可以更改。

不幸的是，无论我尝试什么，我最终都会遇到两种情况:

1 “掩码”也向上滚动:

.scrollable {
  position: absolute;
  width: 300px;
  height: 200px;
  padding: 40px 0;
  overflow: auto;
  border: 1px solid orange;
}

.scrollable:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 40px;
  background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
}

<div class="scrollable">
  <p>
    Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
    Uuuhhh aaaaaah belloo!  Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
    bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
    yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
    belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
    Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
    Uuuhhh aaaaaah belloo!  Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
    bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
    yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
    belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
  </p>
</div>

2 “掩码”与滚动条重叠:

 .scrollable {
  position: absolute;
  width: 300px;
  height: 200px;
  overflow: hidden;
  border: 1px solid orange;
}

.scrollable:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 60px;
  background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
}

.content {
  width: 100%;
  height: 100px;
  padding: 40px 0;
  overflow: auto;
}

<div class="scrollable">
  <p class="content">
    Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
    Uuuhhh aaaaaah belloo!  Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
    bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
    yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
    belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
    Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
    Uuuhhh aaaaaah belloo!  Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la
    bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank
    yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah
    belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
  </p>
</div>

我还尝试添加另一个容器作为具有不同 z-index 的“掩码”，尝试固定定位等。

所以，我想不出任何其他标记和 CSS:

• 内容是可滚动的
• “面具”留在顶部
• “掩码”不与滚动条重叠

我该如何解决这个问题？

Answer 1

您可以尝试位置粘性。如果您使用它，请确保您对当前的浏览器支持没有问题。 https://caniuse.com/#feat=css-sticky

.scrollable {
  position: absolute;
  width: 300px;
  height: 200px;
  overflow: auto;
  border: 1px solid orange;
}

.scrollable:before {
  content: '';
  position: sticky;
  display: block;
  top: 0;
  width: 100%;
  height: 40px;
  background-image: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 100%);
}

<div class="scrollable">
  <p>
    Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu! Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala
    tu tank yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu! daa aaaaaah belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae. Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass
    tank yuuu! Uuuhhh aaaaaah belloo! Jeje bananaaaa daa wiiiii tulaliloo. Baboiii hahaha pepete la bodaaa belloo! Bappleees uuuhhh bananaaaa tank yuuu! La bodaaa. Tatata bala tu tank yuuu! Hahaha pepete wiiiii underweaaar baboiii bappleees. Tank yuuu!
    daa aaaaaah belloo! Tatata bala tu poulet tikka masala uuuhhh potatoooo pepete hana dul sae.
  </p>
</div>