2
我想滚动彩色div当我的页面滚动(或当mousewheel)从顶部到达特定距离。在Mozilla中它的作品,但在铬和在即我有一个坏的影响,当格 “spostamento” 是repositioned.Can你帮我解决这个问题?谢谢元素div水平滚动
的Html
<div class="tutto" style="width:100%;position:relative;">
<div class="spostamento" style="position:absolute;width:100%;">
<div style="width:100%;height:300px;background-color:#000000;">
</div>
<div class="enter" style="height:200px;width:100%;position:relative;overflow:hidden;">
<div class="fascia" style="height:200px;">
<div class="sposta" style="position:absolute;width:100%;left:0px;top:0px;height:200px;">
<div class="first" style="position:absolute;left:0px;height:200px;width:300px;background-color:#0F3"></div>
<div style="position:absolute;left:300px;height:200px;width:300px;background-color:#069"></div>
<div style="position:absolute;left:600px;height:200px;width:300px;background-color:#C09"></div>
<div style="position:absolute;left:900px;height:200px;width:300px;background-color:#6C6"></div>
<div style="position:absolute;left:1200px;height:200px;width:300px;background-color:#00F"></div>
<div style="position:absolute;left:1500px;height:200px;width:300px;background-color:#0F3"></div>
<div style="position:absolute;left:1800px;height:200px;width:300px;background-color:#6C6"></div>
<div style="position:absolute;left:2100px;height:200px;width:300px;background-color:#069"></div>
<div style="position:absolute;left:2400px;height:200px;width:300px;background-color:#C09"></div>
<div style="position:absolute;left:2700px;height:200px;width:300px;background-color:#6C6"></div>
<div style="position:absolute;left:3000px;height:200px;width:300px;background-color:#00F"></div>
<div style="position:absolute;left:3300px;height:200px;width:300px;background-color:#6C6"></div>
<div style="position:absolute;left:3600px;height:200px;width:300px;background-color:#069"></div>
<div style="position:absolute;left:3900px;height:200px;width:300px;background-color:#C09"></div>
<div style="position:absolute;left:4200px;height:200px;width:300px;background-color:#6C6"></div>
<div class="last" style="position:absolute;left:4500px;height:200px;width:300px;background-color:#0F3"></div>
</div>
</div>
</div>
<div style="width:100%;height:1000px;background-color:#000000;"></div>
</div>
</div>
脚本
$(document).ready(function(){
var left=0;
var lastScroll = 0;
var dimensioneSpostamento=0;
var distanzaFascia=$(".fascia").offset().top-200;
$(".sposta > div").each(function(){
dimensioneSpostamento +=$(this).width();
});
var dimensioneEffettiva=dimensioneSpostamento-$(window).width();
$(".tutto").height(dimensioneEffettiva+300+1000);
$(window).scroll(function (event) {
var st = $(this).scrollTop();
if(st>distanzaFascia&&st<dimensioneEffettiva){
$(".spostamento").css("top",st-distanzaFascia);
left +=st-lastScroll;
if (st > lastScroll) {
$(".sposta").css("left", -left);
}
else {
$(".sposta").css("left", -left);
}
lastScroll = st;
}
});
});
谢谢!我更正了我的文章 –
在附注中,[Scrollpath](http://joelb.me/scrollpath/)是这类事物的一个很好的插件 –