css - 为橡皮筋滚动期间可见的额外页面部分设置颜色

Question

至少当您在 Mac 上滚动边缘时，您会看到页面向下移动并在其后面留下纯色。我发现您可以通过设置 body 的背景颜色来更改颜色。但是还有其他方法吗？因为有时我需要在顶部和底部使用不同的颜色等。

Answer 1

我的解决方案是稍微作弊，在 html 或 body 标签上使用 linear-gradient() 来控制给定元素的分段背景颜色。

像这样的东西应该将背景分成两半并照顾现代浏览器。

background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.5, #8BC63E),
    color-stop(0.5, #EEEEEE)
);
background: -o-linear-gradient(bottom, #8BC63E 50%, #EEEEEE 50%);
background: -moz-linear-gradient(bottom, #8BC63E 50%, #EEEEEE 50%);
background: -webkit-linear-gradient(bottom, #8BC63E 50%, #EEEEEE 50%);
background: -ms-linear-gradient(bottom, #8BC63E 50%, #EEEEEE 50%);
background: linear-gradient(to bottom, #8BC63E 50%, #EEEEEE 50%);

我在 iOS 上获得相同的行为时运气好坏参半，而且似乎更依赖于特定的布局。