溢出:隐藏中断jQuery滑块

时间:2012-02-24 05:49:48

标签: jquery css

当您点击链接时,我有一个在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; }

1 个答案:

答案 0 :(得分:7)

尝试阻止默认的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)总是一个好主意避免像这样的怪异错误。