![](/img/trans.png)
[英]How to have multiple anchor targets on a single element using Skrollr?
[英]Skrollr issues with anchor-targets
当您使用Skrollr向下滚动页面时,我试图将div彼此滚动。 我已经达到了与两个div一起使用的预期效果,但是当我尝试使其与第三个div一起使用时,似乎只有第一个和最后一个div都可以工作。 我在想这是因为我没有完全理解Skrollr中data-anchor-target属性的工作方式。 这是我尝试使用的HTML:
<div id="skrollr-body">
<div id="q1" data-0="top:0%;">
Text
</div>
<div id="q2" data-anchor-target="#q1" data--200-bottom="top:100%;" data-top-bottom="top:0%;">
Text2
</div>
<div id="q3" data-anchor-target="#q2" data--200-bottom="top:100%;" data-top-bottom="top:0%;">
Text3
</div>
</div>
和CSS:
body, html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#skrollr-body {
width:100%;
height:100%;
position:fixed;
}
#skrollr-body > div {
overflow:hidden;
position:absolute;
height: 100%;
width: 100%;
}
#q1 {
background: url(http://2.bp.blogspot.com/-RtoJ2papsoA/UhicT91ixmI/AAAAAAAACeg/2XEhv26ZFJc/s1600/jghjgh.jpg) center center no-repeat;
background-size: cover;
}
#q2 {
background: url(http://2.bp.blogspot.com/-RtoJ2papsoA/UhicT91ixmI/AAAAAAAACeg/2XEhv26ZFJc/s1600/jghjgh.jpg) center center no-repeat;
background-size: cover;
}
#q3 {
background: url(http://iwritealot.com/wp-content/uploads/2010/02/golden-clouds-wallpaper.jpg) center center no-repeat;
background-size: cover;
}
我想念的是不允许所有3个div都表现出预期的效果,而不仅仅是第一个和最后一个?
谢谢。
这是一个没有锚定目标的示例http://jsfiddle.net/YMYTy/1/
<div id="skrollr-body">
<div id="q1">
Text
</div>
<div id="q2" data-bottom-top="top:100%;" data-top="top:0%;">
Text2
</div>
<div id="q3" data-bottom-top="top:100%;" data-top="top:0%;">
Text3
</div>
</div>
它与我描述的内容不同,但是可以。
有一个开放功能请求,该请求一旦实现,将使此操作变得更加容易https://github.com/Prinzhorn/skrollr/issues/185您可以在滚动后使用data-100p
和data-200p
制作动画降低视口高度的一到两倍。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.