jquery - 神秘的垂直滚动条出现

Question

我目前正在开发一个网址为 http://lathamcity.com/ 的网站

让我感到困惑的问题是，当显示一些(但不是全部)新元素时，会出现一个垂直滚动条，尽管页面上没有内容。它不仅让我感到困扰，因为它很神秘，而且它看起来也不专业，并且将标题中的文本移动了一点点但很明显。

如果单击“开发中”或目前可用的第二个菜单中的任何选项(所有选项都显示相同的 div)，效果是可见的。

选择第一个菜单中的元素时的 jQuery 代码如下:

var headerHeight = $('#headerTable').height();
$('#selectStart').offset({left: 0, top: headerHeight});
var select1Width = $('#selectStart').width();
var select2Width = select1Width + $('.selector2').width();
$('table.selector2').offset({left: select1Width, top: headerHeight});
$('table.selector2').hide();
$('td.selector1').click(function() {
    $('td.selector2').css({'background-color': '#3B3133'});
    $('table.selector2').hide();
    $('div.pane').hide();
    var choice = '#' + $(this).attr('data-choice');
    $(choice).show();
    $(choice).offset({left: select1Width, top: headerHeight});
    $('td.selector1').css({'background-color': '#3B3133'});
    $(this).css({'background-color': '#61434A'});
});

有什么想法吗？

Answer 1

这是因为你不明白position是如何工作的。

为了解释发生了什么，尝试删除 position: relative;，您将看到第 3 级子菜单如何位于浏览器窗口下方，从而导致滚动条出现。当您更改 top 和 left 时，它会相对更改。

这也是为什么正如 maxisam 建议的那样，放置 position: absolute; 修复它。

当然有很多方法可以解决，但现在你知道原因了。

我建议此页面提供一些有关 CSS 定位的快速类(class):Learn CSS Positioning in Ten Steps