Javascript 表示滚动的渐变元素

我试图在我的元素底部做一个渐变，表示你可以进一步滚动。 我尝试过各种方法，但最终只能够在我的整个包装底部形成梯度。我希望渐变保持在同一点上，而不是在滚动时移动

我想要的东西的示例，但有点干净（参见日历底部）：

完整页面的JSFIDLE，使用不相关的元素进行注释：

HTML:

---

编辑：修复了

我在JSFIDLE上看不到任何具有渐变效果的元素。另外，JSFIDLE解析器正在标记CSS规则中的一些错误。这是否回答了您的问题@melancia在这里，它们实际上似乎处于一种更复杂的情况，滚动元素没有固定的宽度，也没有占据其父元素的全部宽度。但是他们可以简化很多代码，这样我们就更容易帮助他们了。@melancia诀窍是将我的包装器放在另一个元素中，然后让该元素保持梯度。如果你想知道结果如何，我已经编辑了我的主要帖子，而且效果也很好。谢谢你的帮助！

<div class="kwrapper">
        <div class="kalender sammen">
            <h2>Det sker på Åpark kollegiet</h2>
            <p>Her kan du se de events der afholdes på Åpark kollegiet og forskellige spændende arrangementer rundt om i
                Århus by.
                <br>
                Ønsker du at tilføje et event til kalenderen så skal du sende en mail med følgende info:
                <ul>
                    <li>Dato</li>
                    <li>Klokkeslæt</li>
                    <li>Adresse</li>
                    <li>Pris (hvis arrangementet koster penge)</li>
                    <li>og evt deltager-max</li>
                </ul>
                <form class="#" method="get" action="#">
                    <button type="submit" class="default-button"><i class="far fa-envelope"></i>  Send en mail til bestyrelsen</button>
                </form>
            </p>

        </div>
        <div class="kalender stor">
            <script type="text/javascript" src="https://stylemygcal.com/widget.js"></script>
            <div class="smgc-calendar-placeholder" id="smgc-cal-l55Pd4QGM6FAQSno1l8g"></div>
        </div>
    </div>`

.kwrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 500px;
    overflow-y: auto;
}

  .kwrapper:before {
    background: linear-gradient(to bottom, transparent, white);
  }

.kwrapper::-webkit-scrollbar {
    -webkit-appearance: none;
}

.kwrapper::-webkit-scrollbar:vertical {
    width: 20px;
}

.kwrapper::-webkit-scrollbar:horizontal {
    height: 20px;
}

.kwrapper::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, .5);
}

.kalender {
    padding: 20px;
}

.tekst,
.sammen {
    width: 25%;
    margin-left: 30px;
    line-height: 22px;
}

.stor {
    flex-basis: 100%;
    width: 60%;
}

@media (max-width: 990px) {

    .kwrapper {
        flex-wrap: nowrap;
    }

    .tekst,
    .sammen {
        margin-left: 15px;
        margin-right: 15px;
    }

    .kalender {
        width: 100%;
    }

    .kalender stor {
        order: 3;
    }

    .kalender tekst {
        order: 1;
    }

    .kalender sammen {
        order: 2;
    }
}

.kwrapper h2, .container h3 {
    text-align: center;
    font-weight: bolder;
}

.kwrapper img,
.kwrapper a {
    visibility: hidden !important;
    opacity: 0 !important;
    display: none !important;
}

.default-button {
    background-color: #91d184;
    border-radius: 100px;
    border-style: none;
    cursor: pointer;
    color: white;
    transition-duration: 0.5s;
    height: 30px;
    margin-top: 10px;
}

.default-button:hover {
    background-color: #74A769;
}

.sammen form {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}