элемент div горизонтальный прокрутки

Question

Я хотел бы прокрутить цветной div, когда моя страница прокрутки (или когда колесико мыши) достигает определенного расстояния от вершины. В mozilla она работает, но In chrome и, то есть у меня плохие эффекты, когда ДИВ "spostamento" является repositioned.Can вы помочь мне решить эту проблему? Спасибо

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> 

Script

$(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; 
      } 
     }); 
    }); 

Answer 1

Я думаю, что разница между Firefox и Chrome в том, что Chrome свитка 100px на один раз для каждой мыши Whell тика и Firefox имеет плавную прокрутку по умолчанию включено, что приводит к прокрутке несколько пикселей несколько раз для одной мыши колесо тик.

Это вызывает проблему в вашем примере, потому что вы не устанавливаете $(".spostamento").css("top") на свое первоначальное значение, если st ниже distanzaFascia. Вы получаете тот же эффект и в Firefox. Однако он намного легче.

Попробуйте следующее. Я думаю, что это следует сделать трюк:

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

Вот ваш обновленный JSFiddle.