javascript - 防止滚动溢出 :hidden elements when link to anchors are clicked

标签 javascript html css

单击链接到达 anchor ,但即使父元素已溢出:隐藏 它滚动不必要地隐藏了内容

<style>
div#x
    {overflow:hidden;border-bottom:1px red solid;}

div#x > div
    {border:1px red solid;padding:10px;float:left;width:33%;box-sizing:border-box;padding-bottom:10000px;margin-bottom:-10000px;}
</style>

<div id="x">
    <div><a href="#test">go to</a><br><br>a</div>
    <div>a<br><br><br><br>a</div>
    <div>a<br><br><br><br><br><br><span id="test">go here</span></div>
</div>

演示:http://jsfiddle.net/aj8cX/5/

有没有办法解决这个问题?

最佳答案

使用 table > table-cell,这是我所能得到的最接近的结果:

http://jsfiddle.net/mikedidthis/AmNxf/

适用于静态内容,但对于动态内容可能会导致一些问题。

关于javascript - 防止滚动溢出 :hidden elements when link to anchors are clicked,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17408924/

相关文章:

javascript - Nodejs中设置Prototype类的成员变量

html - 当无法访问我的网页上的代码时如何为“喜欢”按钮放置代码

css - 溢出 + 最大高度错误 ie8(兼容模式)或 ie 测试器中的 ie7

javascript - Jquery css 选择器如果没有数据则应用样式

javascript - 如何从确认弹出警报中获取返回值

javascript - jQuery select2 控件 - 检索最后选择的元素

html - 如何确定 CSS 切换输入的 'toggle' 状态?

html - 与 Chrome/Firefox 的兼容性问题

css - 滚动时使具有相对位置的 Div 位于页脚 div 下方

javascript - CSS 裁剪图像以适应屏幕宽度,同时保持图像的原始高度