Firefox 中的 jQuery .append()：出现垂直滚动条？答案

【问题标题】：jQuery .append() in Firefox: vertical scrollbar appears?Firefox 中的 jQuery .append()：出现垂直滚动条？
【发布时间】：2011-08-15 11:30:27
【问题描述】：

我想使用 .append() 动态地将多个 DIV 添加到我页面中的目标 DIV，然后设置它们的高度和位置，以便它们在页面中都可见而无需滚动。

一切正常，但在 Firefox（Ubuntu 上的 3.6.16）中会出现一个垂直滚动条，就好像每个新 DIV 的高度都被添加到页面内容的总高度中一样——即使每个新 DIV 是在屏幕顶部附近，并且它的高度不在屏幕长度附近。 Ubuntu Chrome 运行良好。当我在追加新的 DIV 后向 jQuery 询问目标 DIV 的高度时，它并没有改变。

这是我为隔离问题而编写的测试页面的大部分页面代码 - 在此先感谢！

        <style type="text/css">
        #target {
            width: 50px;
            height: 50px;
            background-color: #cfc;
        }
    </style>
    <script>
        $(document).ready(function() {
            var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff');

            for(i = 0; i < 10; i++){
                $('#target').append('<div id="new_' + i + '">Hello</div>');
                $('#new_' + i)
                .position({
                    my: 'left top',
                    at: 'left top',
                    of: '#target',
                    offset: '' + (i * 20) + ' ' + (i * 10)
                })
                .width(200)
                .height(150)
                .css('background-color', cols[i]);
            }
        });
    </script>
</head>
<body>
    <div id="target">
    </div>
</body>

【问题讨论】：

您是否尝试将overflow:hidden; 添加到#target 元素？
好吧，您将 150 像素高的元素附加到 50 像素高的元素上。为什么您不期待滚动条？
嗨 Pointy - 滚动条作为一个整体出现在浏览器窗口中，而不是我的小 50px div。

标签： jquery firefox scrollbar append

【解决方案1】：

如果您将添加的<div> 元素指定为“位置：绝对”，那么您将不会获得滚动条。

jQuery UI“.position()”实用程序将为受影响的元素（您添加的<div> 元素）提供“位置：相对”，如果它们没有另外设置“位置”。以这种方式定位的元素会消耗页面上的布局空间，就好像它们没有从它们的“自然”位置移开一样。因此，当您添加所有这些元素时，页面会溢出，即使它们已重新定位以使它们都适合。

通过给它们“位置：绝对”，您可以将它们带出普通的布局流程。由于我不明白的原因，Chrome 不同意这一点；我认为 Firefox 实际上在这里做的是正确的事情。（edit - 如果你添加一行以将最后一个 <div> 附加到“目标”，并使其只是一个普通的 jane <div>，其中包含一些文本但根本没有定位，然后你会看到它最终在 Chrome 的页面下方, 你会得到一个与 Firefox 给你的大小相同的滚动条. 因此, 看起来 Chrome 不会“声称”幻影空间, 除非真的有什么紧随其后。）

Here 是一个 jsfiddle。更新后的代码（多出一行）：

    $(document).ready(function() {
        var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff');

        for(i = 0; i < 10; i++){
            $('#target').append('<div id="new_' + i + '">Hello</div>');
            $('#new_' + i)
            .position({
                my: 'left top',
                at: 'left top',
                of: '#target',
                offset: '' + (i * 20) + ' ' + (i * 10)
            })
            .css('position', 'absolute')
            .width(200)
            .height(150)
            .css('background-color', cols[i]);
        }
    });

【讨论】：

漂亮，谢谢 - 我在我的 CSS 文件中使用了一个类定义，这样我所有新创建的 DIV 都具有绝对位置，并且它工作得很好。一个非常好的、明确的答案。

【解决方案2】：

您可以将所有这些内容包含在 css() 函数中...

演示：http://jsfiddle.net/wdm954/xSYBr/

var cols = new Array('#660', '#606', '#066', '#993', '#939', '#399', '#cc9', '#c9c', '#9cc', '#ffc', '#fcf', '#cff');

for(var i = 0; i < 10; i++){
    $('#target').append('<div id="new_' + i + '">Hello</div>');
    $('#new_' + i).css({
        backgroundColor: cols[i],
        position: 'absolute',
        left: i * 20 + 'px',
        top: i * 10 + 'px',
        width: '200px',
        height: '150px'
     });
}

【讨论】：