背景附件本地 - 如何让孩子元素与背景颜色，仍然看到滚动效果？ [英] Background attachment local - How to have child elements with background colours and still see scroll effect?
问题描述
我想使用background-attachment：local，但在正在滚动的项目上使用背景颜色来使用纯CSS滚动阴影。我受到本文的启发：：对于支持图表
请使用Chrome进行测试，如果您需要跨浏览器解决方案，请参阅我的jQuery演示。 b
$ b
.flow {
background：
linear-gradient（＃f00 30％，rgba（255,0,0,0） ），
线性梯度（rgba（255,0,0,0），＃f00 70％）0 100％，
径向梯度（50％0，最远侧，rgba ，0,0，.2），rgba（0,0,0,0）），
径向梯度（50％100％，最远侧，rgba（0,0,0，.2） rgba（0,0,0,0））0 100％;
background：
线性梯度（＃f00 30％，rgba（255,0,0,0）），
线性梯度（rgba（255,0,0） （0,0,0,0,0），＃f00 70％）0 100％，
径向梯度（最远侧在50％0，rgba（0,0,0，.2），rgba ）），
径向梯度（最远侧在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。
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 b $ b} 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（最远端为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（）表示调用函数 c> 滚动，向前移动，我们有以下行
$（＃shadow，#whitish）css（{'top'：$（'data-holder'）。scrollTop（）+'px'}） ;
使用它来调整顶部 ，因为你知道 fixed 元素只是相对于视口而不是相对于元素， code> absolute 定位的元素是所以我们使用 position：absolute; 并调整顶部使用该代码，前进，我们在这里阻止
var y = $（'。data-holder' ）.scrollTop（）;
if（y> 0）{
$（＃shadow）。
} else {
$（＃shadow）。hide（）;
}
在这里，这不会显示阴影，一旦你开始滚动，所以它简单地意味着在用户滚动具有<$ c $的元素后，显示具有 id 的元素 #shadow 当超过 0px 。
$ b
jQuery演示 （有意使用白色背景，参考下一个演示为一个标准的，你可以摆脱发白元素如果你不需要一个备用顶部）
现在，我已应用背景到子元素，为什么这个工作和纯CSS解决方案不？好吧，你从网站选择了代码，但你错过阅读这篇文章，文章清楚地说，作者使用径向背景模拟阴影效果与 rgba 值在使径向图的边不透明...然后使用 background-attachment 属性使用值 local ，所以确实，当您为子元素分配背景时，它将覆盖父元素的背景，因此它失败，甚至使用 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;
}
但这里没有 z-index ，所以我希望我的解决方案很清楚，我已经很好地解释了这一点，你可以随时问我，如果你碰到一些点。
I am trying to acheive Pure CSS scrolling shadows using background-attachment: local but with a background colour on the items that are being scrolled. I was inspired by this article http://lea.verou.me/2012/04/background-attachment-local/ but in their example they do not have a background colour on the child elements.
The problem is that the child elements are above the parent on the z-index scale which means their background colour covers the shadow effect. I know that I can cheat this by having a top and bottom padding on the parent element but this is not a practical solution.
See below for a demo and my code. Any help would be awesome. Many thanks. Clean jQuery answers which offer cross browser support would also be welcomed.
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;
}
Why don't you modify the gradients of the parent element itself? As the author is simulating the shadow effect using the radial gradient, there is no physical element present so that you can play with the z-index, read ahead if you want a jQuery solution for the same.
Demo (Users who hate codepen just like I do)
Note: These demo's won't work on Firefox < 25.0 as it's using local value for background-attachment property
Credits : For Support Chart
Please use Chrome to test, if you want a cross browser solution, refer to my jQuery demonstration.
.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
Ok, so the first part of my answer covered the solution by tweaking the gradients which were used by the author itself, I will decode them for you later, as of now, we will use the same trick but using 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;
}
So here, in the above jQuery code we use the first which is $('.data-holder').scroll() means invoke the function when the element having a class of .data-holder is scrolled, moving ahead, we have the line below
$("#shadow, #whitish").css({'top': $('.data-holder').scrollTop() + 'px'});
Which am using to tweak their top value onscroll as you know that fixed position elements are only relative to the viewport and not relative to the element, but absolute positioned elements are so we use position: absolute; and tweak the top using that code, moving ahead, we have the block here
var y = $('.data-holder').scrollTop();
if( y > 0 ){
$("#shadow").show();
} else {
$("#shadow").hide();
}
So here, this does nothing but shows the shadow, once you start scrolling, so it simply means show an element having an id of #shadow after user scrolls the element having a class of .data-holder when exceeds 0px.
jQuery Demo (Deliberately used white background there, refer next demo for a standard one, you can get rid of the whitish element if you don't require a spare top)
Now, I've applied the background to the child elements as well, so why does this work and the pure CSS solution doesn't? Well, you picked the code from the website but you missed to read the article, the article clearly states that the author uses radial background to simulate the shadow effect along with rgba values which plays a crucial role there in making the sides of the radials opaque... which are then dragged along using background-attachment property with a value of local, so indeed, when you assign a background to the child elements, it will overlap the background of the parent element, and hence it fails, even using z-index won't work there, as there is no literal element used by the author, unlike am using the one with jQuery.
Second question was about the z-index which I already said that it won't work in my comments as well, because the child element exists in the different stacking context.. So something like this won't work, the parent will just overlap the child, so are you looking to hide the child elements by assigning a negative 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;
}
But anyways, here, there is no question of z-index, so I hope my solutions are clear and I've well explained the thing, you can feel free to ask me if you bump at some point.
这篇关于背景附件本地 - 如何让孩子元素与背景颜色，仍然看到滚动效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
