Как растянуть градиент по всей области блока до низа CSS

Question

body {
 background: #333;
 margin: 0;
}
.wrapper {
 width: 300px;
 height: 200px;
 background: #fff;
 margin: 50px auto;
 box-sizing: border-box;
 padding: 10px;
 overflow: hidden;
 overflow-y: scroll;
 position: relative;
}
.wrapper::before {
 content: '';
 position: absolute;
 left: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
 background-image: linear-gradient(to bottom, transparent, red);
}
.accordion-item {
 width: 100%;
 height: 50px;
 background: #000;
 margin-bottom: 10px;
}

<div class="wrapper">
 <div class="accordion">
   <div class="accordion-item"></div>
   <div class="accordion-item"></div>
   <div class="accordion-item"></div>
   <div class="accordion-item"></div>
   <div class="accordion-item"></div>
   <div class="accordion-item"></div>
 </div>
</div>

Мне хотелось создать эффект исчезновения, но при скролле у меня градиент сдвигается вместе с контентом.

Подскажите, как можно поправить, что бы градиент был приклеен к низу блока.

Answer 1

Вам нужно применять свойство linear-gradient к accordion вместо wrapper:

body {
  background: #333;
  margin: 0;
}

.wrapper {
  overflow-x: hidden;
  overflow-y: scroll;
  width: 300px;
  height: 200px;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  margin: 50px auto; 
}

.accordion {
  position: relative;
}

.accordion::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, transparent, red);
}

.accordion-item {
  width: 100%;
  height: 50px;
  background: #000;
  margin-bottom: 10px;
}

<div class="wrapper">
  <div class="accordion">
    <div class="accordion-item"></div>
    <div class="accordion-item"></div>
    <div class="accordion-item"></div>
    <div class="accordion-item"></div>
    <div class="accordion-item"></div>
    <div class="accordion-item"></div>
  </div>
</div>

Answer 2

Так должно быть правильно:

body {
  margin: 0;
  background: #333;
}

.wrapper {
  position: relative;
  height: 200px;
  width: 300px;
  margin: 50px auto;
  box-sizing: border-box;
  background: #fff;
}

.wrapper::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: calc(100% - 17px);
  background-image: linear-gradient(to bottom, transparent, red);
  pointer-events: none;
}

.accordion {
  height: 100%;
  width: 100%;
  margin: 50px auto;
  padding: 10px;
  overflow: hidden;
  overflow-y: scroll;
  box-sizing: border-box;
  background: #fff;
}

.accordion-item {
  height: 50px;
  width: 100%;
  margin-bottom: 10px;
  background: #000;
}

<div class="wrapper">
  <div class="accordion">
    <div class="accordion-item"></div>
    <div class="accordion-item"></div>
    <div class="accordion-item"></div>
    <div class="accordion-item"></div>
    <div class="accordion-item"></div>
    <div class="accordion-item"></div>
  </div>
</div>

БЛОГ НА HUSL

Как растянуть градиент по всей области блока до низа CSS

Ответы (2 шт):