1

我试图在滚动内容的末尾显示一个渐变，方法是使用带有background-position: bottom和的线性渐变background-attachment: local。这适用于除 IE 和 Edge 之外的所有浏览器。我可以接受它，就好像它不会到处说这个功能已经完全开发了一样。

我只是找不到任何解决方案。它应该像那样工作，但显然不是。我错过了一些东西，但我不知道是什么。

重要的是，当内容小于父级时，内容保持垂直居中，并且滚动渐变在任何情况下都有效（大/小内容和任何滚动位置）。

.scrollContent {
    display: flex;
    width: 200px;
    height: 200px;
    overflow-y: auto;

    background-image: linear-gradient(transparent, white 80%), radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0));
    background-position: bottom;
    background-size: 100% 40px, 100% 10px;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
}

.vcenter {
    flex-grow: 1;
    margin: auto;
}
<div class="scrollContent">
    <div class="vcenter">
        Scroll first <br>Scroll <br>Scroll <br>Scroll <br> Scroll <br>Scroll <br>Scroll <br> Scroll <br>Scroll <br>Scroll <br> Scroll <br>Scroll <br>Scroll <br>Scroll <br>Scroll last
    </div>
</div>

margin: auto比 align-items 更好地垂直居中 flex 项目：在滚动环境中居中

此代码应显示一个内容溢出的框，仅当您滚动到内容末尾时才会显示渐变。在 IE/Edge 中，渐变已经在内容中间显示页面加载。滚动时它会随着内容滚动。非常丑陋，绝对不是故意的。

这里还有一些可以玩的代码笔。

https://codepen.io/yesman82/pen/KJbrLo

4

0 回答 0