为什么通过这种方式overflow:hidden的内容会显示出来

Question

    <div class="slider">
        <div id="one" class="box"></div>
        <div id="two" class="box"></div>
        <div id="three" class="box"></div>
    </div>
    <nav>
        <a href="#one">One</a>
        <a href="#two">Two</a>
        <a href="#three">Three</a>
    </nav>

.box {
    width: 500px;
    height: 500px;
}

#one {
    background: red;
}

#two {
    background: green;
}

#three {
    background: #000;
}

.slider {
    width: 500px;
    height: 500px;
    overflow: hidden;
    margin: 30px auto;
    position: relative;
}

Answer 1

overflow: hidden 的元素就是没有滚动条的而已
你点那个锚链接，当然就滚动到那个锚点元素去了呗

Answer 2

嘻，这个奇怪的问题我也碰到过，我是在用插件的前提下的，这样页面显示效果好像是用了js一般，但是其实不是。

你启用下游览器的调试模式看看就明白了。当你点击的时候#one的位置发生了变化，