Как создать маску, которая затемняет прокручиваемый контент, но не перекрывает полосу прокрутки?

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-индексами, попробовал фиксированное позиционирование и т. Д.

Итак, я не могу найти другую разметку и 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>

Answer 2

Вы можете использовать вместо 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, вы можете использовать $ (селектор) .prop ('clientWidth'), чтобы получить доступную ширину контентаи применить его к тени.Помните, что этот элемент не может быть a : псевдоэлемент

$('.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>

Answer 3

Вы можете использовать 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>