html - 在 html 页面上向下滚动时如何阻止白色出现？

Question

我在 CSS 中定义的 html 文档中有一个渐变背景:

body {
    /*background-color: #1A0F0F;*/
    /*color: #D7D7D7;*/
    /*height: 100%;*/ /* come back to this */
    margin: 0;
    background: -webkit-linear-gradient(green, black); 
    background: -o-linear-gradient(green, black); 
    background: -moz-linear-gradient(green, black); 
    background: linear-gradient(green, black);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

背景渐变确实存在，但它做了一件烦人的事情，当我滚动时，渐变在底部矩形上消失，它只是白色 - 具体来说，这是在 Mac 上打开 Google Chrome 上的文档，但它似乎也发生在 Safari 上。

知道是什么原因造成的吗？

Answer 1

发生这种情况的原因是 OSX 中的过度滚动(或“flex 滚动”)。

您不能为默认为白​​色的过度滚动区域提供渐变色。但是您可以使用纯色设计它。

只需设置 background 属性来设置滚动区域的样式，并使用 background-image 设置渐变，如下所示:

body {
    background: black;
    background-image: linear-gradient(black, green);
}

这有点 hack，不幸的是只对页面的顶部或底部有帮助，但看起来应该没有白色那么刺耳。

值得注意的是，这只是 Google Chrome 中的一项要求，Safari 应该在滚动期间尊重背景渐变。