overflow:hidden破坏了jQuery幻灯片

Question

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

我创建了一个demo供任何人查看。你会注意到它是有效的，但尝试将.clickWrapper div添加overflow: hidden以隐藏正在滑动的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; }

- Sethen

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

我不确定为什么会出现这种情况？

我的看法是，当hash前面有井号时，浏览器本身会尝试滚动到与href属性匹配的任何锚点。这将导致位置混乱，因为页面会尝试向下滚动到具有与href相同锚点的元素。

使用带有哈希标记且与元素ID匹配的href值用于除滚动以外其他任何内容时，始终添加preventDefault（即使在此处没有必要停止任何传播，也可以返回false）是避免出现这种奇怪错误的好方法。

- adeneo

---

也许你可以解释一下哈希如何破坏代码，以及为什么当溢出未隐藏时它是有效的。 - Sparky

@ShawnTaylor - 没有“必要”更改哈希值，可以使用包含任何属性的任何元素来执行类似操作，以便通过ID或任何其他属性访问正确的元素，但这是问题所在的代码，并且这不是一种罕见的方法，但也有其他几种方法可以实现。 - adeneo