如何创建一个掩盖滚动内容但不会与滚动条重叠的面膜

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

此容器本身定位为absolute。标记和CS不给出，可以更改。

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

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>

 .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索引充当"掩码"，尝试了固定定位等。

所以，我无法弄清楚其他任何标记和CSS：

内容可滚动
"面具"停留在顶部
"蒙版"不会重叠卷轴

如何解决此问题？

您可以尝试粘性位置。如果使用此功能，请确保对当前浏览器支持可以。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>

您可以使用 calc()从覆盖层中提取卷轴的宽度：

 .scrollable {
  position: absolute;
  width: 300px;
  height: 200px;
  overflow: hidden;
  border: 1px solid orange;
}
.scrollable:before {
  content: '';
  position: absolute;
  width: calc(100% - 18px);
  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>

您可以改用radial-gradient。这样，角落就不会重叠滚动，效果看起来非常好。

body {
margin: 0;
padding: 0;
}
.scrollable {
  width: 300px;
  height: 200px;
  max-height:100%;
  overflow: auto;
  border: 1px solid orange;
}
section:before {
  content:"";
  display: block;
  position: absolute;
  width: 300px;
  height: 20px;
  background-image: radial-gradient(rgba(0, 0, 0, 0.25) 20%, rgba(0, 0, 0, 0) 80%);
  background-position: center -10px;
  background-repeat: no-repeat;
}

<section>
  <div class="scrollable">
    <p>
      Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!
      Uuuhhh aaaaaah belloo!</p><p>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</p><p>
      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!</p><p>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>
</section>

但是，如果您喜欢使用linear-gradient，则可以使用$（Selector）.prop（'clientwidth'）获取可用宽度并将其应用于阴影。请记住，该元素不能是 a ：pseudoElement

$('.shade').css('width', function(){
var scrollableWidth = $('.content').prop('clientWidth');
return scrollableWidth;
});

.scrollable {
  box-sizing: border-box;
  position: absolute;
  width: 300px;
  height: 200px;
  border: 1px solid orange;
}
.shade {
  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: 100%;
  padding: 0;
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollable">
  <div class="shade"></div>
  <div class="content">
    <p>Minions ipsum aaaaaah tank yuuu! Tank yuuu! Gelatooo poopayee. Baboiii po kass tank yuuu!</p><p>
    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>
</div>

相关内容

最新更新

热门标签：