Question

我正在尝试使用背景附件实现纯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＆lt; 25.0，因为它使用local属性

的background-attachment值

enter image description here

^{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;
}

注意：您可以缩小此值，例如rgba(255,0,0,0)之类的值可以简单地写成#f00

好的，所以我的答案的第一部分通过调整作者本身使用的渐变来涵盖解决方案，我将在稍后为您解码，截至目前，我们将使用相同的技巧但使用jQuery。 / p>

<强>的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()意味着当滚动function class的元素时调用.data-holder，移动未来，我们有以下一行

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

用于调整top值 onscroll ，因为您知道fixed 位置元素仅相对于视口而非相对对于元素，absolute定位元素是这样的，我们使用position: absolute;并使用该代码调整top，继续前进，我们在这里有块

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

所以在这里，一旦你开始滚动，这只会显示阴影，所以它只是意味着在用户滚动具有{{1}的元素后显示一个id #shadow的元素当class超过.data-holder时。{/ p>

jQuery Demo （故意在那里使用白色背景，请参阅下一个标准版本，如果您不需要备用0px，可以删除whitish元素}）

Demo 2

现在，我已经将top应用于子元素，那么为什么这样做并且纯CSS解决方案没有呢？好吧，你从网站上挑选了代码，但是你错过了阅读文章，文章明确指出作者使用径向背景来模拟阴影效果以及background值，这在制作边缘方面起着至关重要的作用径向不透明...然后使用值rgba的{{1}}属性拖动，所以实际上，当您为子元素指定背景时，它将与{{1}重叠父元素，因此失败，即使使用background-attachment也无法在那里工作，因为作者没有使用文字元素，这与使用jQuery的文字元素不同。

第二个问题是local，我已经说过它在我的评论中也不起作用，因为子元素存在于不同的堆叠上下文中。所以这样的东西不起作用，父项将与子项重叠，所以您是否希望通过赋值background来隐藏子元素？

z-index

Demo

但无论如何，在这里，没有z-index的问题，所以我希望我的解决方案很明确，我已经很好地解释了这个问题，如果你碰到某些问题，你可以随意问我。 / p>

背景附件本地 - 如何使用背景颜色的子元素仍然看到滚动效果？

1 个答案: