html - 本地背景附件 - 如何让子元素具有背景颜色并仍然看到滚动效果？

Question

我正在尝试使用 background-attachment: local 实现纯 CSS 滚动阴影，但在滚动的元素上使用背景色。我受到这篇文章的启发 http://lea.verou.me/2012/04/background-attachment-local/但在他们的例子中，他们的子元素没有背景颜色。

问题是子元素在 z-index 尺度上高于父元素，这意味着它们的背景颜色覆盖了阴影效果。我知道我可以通过在父元素上添加顶部和底部填充来作弊，但这不是一个实用的解决方案。

请参阅下面的演示和我的代码。任何帮助都是极好的。非常感谢。提供跨浏览器支持的干净的 jQuery 答案也将受到欢迎。

CODEPEN DEMO

HTML

<div class="flow">
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
  <div>Test</div>
</div>

CSS

.flow {
  background:
    linear-gradient(white 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
    radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
    radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
  background:
    linear-gradient(white 30%, rgba(255,255,255,0)),
    linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 100% 60px, 100% 60px, 100% 10px, 100% 10px;
  background-attachment: local, local, scroll, scroll;
  margin: 40px auto;
  max-height: 200px;
  overflow: auto;
  width: 200px;
}
.flow > div {
  padding: 10px;
}

Answer 1

为什么不修改父元素本身的渐变呢？由于作者使用径向渐变模拟阴影效果，因此不存在物理元素，因此您可以使用 z-index，如果您需要相同的 jQuery 解决方案，请继续阅读。

Demo

Demo (和我一样讨厌 codepen 的用户)

注意:这些演示不适用于 Firefox < 25.0，因为它使用 local 值作为 background-attachment 属性

^{Credits : 支持图表}

请使用Chrome进行测试，如果你想要跨浏览器的解决方案，请引用我的jQuery演示。

.flow {      
    background:
    linear-gradient(#f00 30%, rgba(255,0,0,0)),
    linear-gradient(rgba(255,0,0,0), #f00 70%) 0 100%,
    radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
    radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;

    background:
    linear-gradient(#f00 30%, rgba(255,0,0,0)),
    linear-gradient(rgba(255,0,0,0), #f00 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;

    background-repeat: no-repeat;
    background-color: #f00;
    background-size: 100% 60px, 100% 60px, 100% 10px, 100% 10px;
    background-attachment: local, local, scroll, scroll;
    margin: 40px auto;
    max-height: 200px;
    overflow: auto;
    width: 200px;
}

Note: You can minify this, for example, values like rgba(255,0,0,0) can be simply written as #f00

---

好的，所以我的回答的第一部分涵盖了通过调整作者自己使用的渐变来解决的问题，我稍后会为您解码它们，截至目前，我们将使用相同的技巧，但使用 jQuery。

jQuery

$(document).ready(function(){
    $('.data-holder').scroll(function(){
        $("#shadow, #whitish").css({'top': $('.data-holder').scrollTop() + 'px'});
        var y = $('.data-holder').scrollTop();
        if( y > 0 ){
            $("#shadow").show();
        } else {
            $("#shadow").hide();
        }
    });
});

CSS

.data-holder {
    width: 200px;
    height: 300px;
    border: 1px solid #ddd;
    overflow: auto;
    position: relative;
}

#shadow {
    position: absolute;
    left: 0;
    height: 30px;
    width: 180px;
    z-index: 9999;
    display: none;
    background: radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
}

#shadow + div {
    padding-top: 10px;
}

#whitish {
    background: #fff;
    position: absolute;
    top: 0;
    width: 100%;
    height: 10px;
    z-index: 999999;
}

.block {
    background: #f00;
}

所以在这里，在上面的 jQuery 代码中，我们使用第一个 $('.data-holder').scroll() 表示在具有 .data-holder 的 class 的元素被滚动，向前移动，我们有下面的行

$("#shadow, #whitish").css({'top': $('.data-holder').scrollTop() + 'px'});

它用于调整它们的 top 值 onscroll 因为你知道 fixed position 元素只是相对的相对于视口(viewport)而不是相对于元素，但是 absolute 定位的元素是这样的，所以我们使用 position: absolute; 并使用该代码调整 top ，继续前进，我们在这里遇到障碍

var y = $('.data-holder').scrollTop();
if( y > 0 ){
    $("#shadow").show();
} else {
    $("#shadow").hide();
}

所以在这里，一旦你开始滚动，这除了显示阴影什么都不做，所以它只是意味着在用户滚动后显示一个 id 为 #shadow 的元素当超过 0px 时，元素的 class 为 .data-holder。

jQuery Demo (故意在那里使用白色背景，请引用下一个演示以获得标准的演示，如果不需要备用的 top，则可以去掉 whitish 元素)

Demo 2

现在，我也将 background 应用于子元素，那么为什么这样做有效而纯 CSS 解决方案却无效？好吧，你从网站上选择了代码，但你错过了阅读文章，文章明确指出作者使用径向背景来模拟阴影效果以及 rgba 值，这在其中起着至关重要的作用使径向线的侧面不透明...然后使用值为 local 的 background-attachment 属性拖动它们，所以实际上，当您为子元素，它将与父元素的 background 重叠，因此失败，即使使用 z-index 也不会在那里工作，因为没有使用文字元素由作者编写，与我使用 jQuery 不同。

第二个问题是关于 z-index 的，我已经说过它在我的评论中也不起作用，因为子元素存在于不同的堆叠上下文中。所以像这样行不通，父元素只会与子元素重叠，所以您是否希望通过分配负的 z-index 来隐藏子元素？

<div class="parent">
    <div class="child"></div>
</div>

.parent {
    height: 300px;
    width: 300px;
    border: 1px solid #f00;
}

.child {
    border: 1px solid #000;
    height: 40px;
    width: 40px;
    z-index: -1;
    position: relative;
}

Demo

但是无论如何，在这里，没有z-index的问题，所以我希望我的解决方案很清楚并且我已经很好地解释了这件事，如果你遇到问题可以随时问我在某个时候。