Question

我正在尝试通过使用带有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垂直于弯曲项目的居中位置比对齐项目更好：在滚动环境中居中

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

这也是一些可使用的代码笔。

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

Edge / IE的CSS背景附加局部和底部位置问题

0 个答案: