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>
Мне хотелось создать эффект исчезновения, но при скролле у меня градиент сдвигается вместе с контентом.
Подскажите, как можно поправить, что бы градиент был приклеен к низу блока.