元素div水平滾動

我想滾動彩色div當我的頁面滾動（或當mousewheel）從頂部到達特定距離。在Mozilla中它的作品，但在鉻和在即我有一個壞的影響，當格「spostamento」是repositioned.Can你幫我解決這個問題？謝謝元素div水平滾動

Link jsfiddle

的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; 
      } 
     }); 
    });

來源

2013-12-11 Lorenzo Serra

謝謝！我更正了我的文章 –

在附註中，[Scrollpath]（http://joelb.me/scrollpath/）是這類事物的一個很好的插件 –

我認爲Firefox和Chrome之間的區別是，Chrome的滾動100px的一次爲每個鼠標線輪蜱和Firefox瀏覽器在默認情況下啓用平滑滾動，這會導致滾動了幾像素多次爲一個鼠標輪蜱。

它會導致您的示例中出現問題，因爲您在st低於distanzaFascia時未將$(".spostamento").css("top")設置回原始值。你也可以在Firefox中獲得同樣的效果。但它更輕。

請嘗試以下操作。我認爲它應該做的伎倆：

if (st <= distanzaFascia) { 
    $(".spostamento").css("top", 0); 
    $(".sposta").css("left", 0); 
}

這裏是你的更新JSFiddle。

來源

2013-12-11 19:43:27 Jan

元素div水平滾動

回答

相關問題