溢出：隱藏中斷jQuery滑塊

Question

我有一個滑塊，當你點擊一個鏈接時，在div之間來回跳動。它一直工作，直到你添加overflow: hidden，然後一切都打破了！

我創建了一個demo供任何人查看。你會注意到它的工作原理，但嘗試將overflow: hidden添加到.clickWrapper div以隱藏div滑入，並打破。當你點擊你想要的那個時，它會滾過其他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）總是一個好主意以避免像這樣的怪異的錯誤。