overflow:hidden breaks滑块

Question

我有一个滑块，当你点击一个链接时，它会在div之间来回跳动。它一直在工作，直到你添加了overflow: hidden，然后一切都崩溃了！

我创建了一个供任何人查看的demo。您将注意到它可以工作，但是尝试将overflow: hidden添加到.clickWrapper div以隐藏滑入的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

尝试阻止默认哈希更改，如下所示：

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

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

​FIDDLE

我不完全确定为什么会发生这种情况？

我的两个缺点是，它是浏览器的本机函数，它尝试滚动到任何与href属性匹配的锚点，当前面有一个散列时，单击该锚点。

当页面试图向下滚动到与href具有相同锚点的元素时，这会导致位置混乱。

当使用href值和href值，并且href值与滚动之外的元素ID匹配时，添加preventDefault (或者返回false，即使这里不需要停止任何传播)总是一个好主意，以避免像这样的怪异bug。