3

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>

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

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

2 ответа 2

4

Вам нужно применять свойство 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>

3
  • Но проблема в том что градиент находится позади дочерних элементов, и в результате нет эффекта исчезновения блоков, нужно как то поверх его
    – Лукас
    18 авг 2020 в 14:06
  • @Лукас Ответ обновлен
    – Vasily
    18 авг 2020 в 15:07
  • Да спасибо это то что нужно
    – Лукас
    18 авг 2020 в 16:16
3

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

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>

1
  • 1
    Это то чего я хотел добиться, спасибо!
    – Лукас
    18 авг 2020 в 14:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.