オーバーフロー：隠しブレークjQueryスライダー

Question

リンクをクリックすると、div間で前後にバウンスするスライダーがあります。それはあなたがoverflow: hiddenを追加するまですべての方法で動作し、それからすべてが壊れます！

私は誰でも見るためにdemoを作成しました。あなたはそれが動作することに気づくでしょうが、.clickWrapper divにoverflow: hiddenを追加して、divsがスライドインするのを隠すようにしてください。あなたが望むものをクリックすると、他のdivをスクロールします。

http://jsfiddle.net/z67tZ/

$(function() { 
    $(".clickIt a").click(function() { 
     var linked = $(this).attr("href"); 
     var pos = $(linked).position(); 
     $(".clickSlider").stop().animate({ 
      left: -pos.left, 
     }, 500); 
    }); 
}); 

<div id="wrapper"> 
    <div class="clickIt"> 
     <a href="#one">one</a> 
     <a href="#two">two</a> 
     <a href="#three">three</a> 
    </div> 
    <div class="clickWrapper"> 
     <div class="clickSlider"> 
      <div id="one">one</div> 
      <div id="two">two</div> 
      <div id="three">three</div> 
     </div> 
    </div> 
</div> 

#wrapper {margin: 0 auto; width: 200px; } 
.clickWrapper {background:red; position:relative; overflow:hidden; background-color: #CCC; height: 200px; } 
.clickSlider { position: relative; width: 600px; } 
#one, #two, #three { float: left; width: 200px; } 

Answer 1

そうのように、デフォルトなhashchangeを防止してみてください。

$(".clickIt a").click(function (e) { 
    e.preventDefault(); 
    var linked = $(this).attr("href"), 
     pos = $(linked).position().left; 

    $(".clickSlider").stop().animate({left: -pos}, 500); 
}); 

FIDDLE

これがなぜ起こるのか完全にわからないのですか？

私の2centsは、ハッシュによって先行されたときにクリックされるhref属性と一致するアンカーにスクロールしようとするブラウザネイティブ関数であるということです。

これは、ページがhrefと同じアンカーを持つ要素までスクロールしようとすると、位置が狂ってしまいます。

ハッシュでhref値を使用し、スクロール以外の要素IDと一致する場合は、preventDefaultを追加するか（ここで伝播を停止する必要がない場合でもfalseを返す）、常に良いアイデアですこのような不思議なバグを避けるために。