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

发布于 2024-11-04 06:00:10 字数 1302 浏览 4 评论 0原文

我想使用 .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>

原文

I want to dynamically add a number of DIVs to a target DIV in my page with .append(), then set their heights and positions so they're all visible in the page without scrolling.

All of this goes OK, but in Firefox (3.6.16 on Ubuntu) a vertical scrollbar appears, as though the height of each new DIV were being added to the total height of the page content - even though each new DIV is up near the top of the screen, and its height isn't anywhere near the length of the screen. Ubuntu Chrome behaves fine. When I ask jQuery for the height of the target DIV after appending the new DIVs, it hasn't changed.

Here's most of the page code for a test page I wrote to isolate the problem - thanks in advance!

        <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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫七 2024-11-11 06:00:10

如果您为添加的

元素指定“position:absolute”，那么您将不会看到滚动条。

jQuery UI“.position()”实用程序将为受影响的元素（您添加的

元素）提供“position:relative”（如果它们没有以其他方式设置“position”）。以这种方式定位的元素会消耗页面上的布局空间，就好像它们没有从其“自然”位置移开一样。因此，当您添加所有这些元素时，即使它们已重新定位以使其全部适合，页面也会溢出。

通过给它们“位置：绝对”，您可以将它们带出普通的布局流程。 Chrome 不同意这一点，原因我不明白；我认为 Firefox 实际上在这里做的是正确的事情。（编辑 - 如果您添加一行将最后一个

附加到“target”，并使其只是一个简单的

其中有一些文本，但根本没有定位，然后你会看到它最终在 Chrome 中的页面下方，并且你将得到一个与 Firefox 提供的大小相同的滚动条，因此，看起来 Chrome 并没有“声明”幻影空间，除非后面确实有东西。）

这里是一个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]);
        }
    });

If you give the added <div> elements "position: absolute", then you'll get no scrollbars.

The jQuery UI ".position()" utility will give the affected elements (your added <div> elements) "position: relative" if they're not otherwise set up with a "position". Elements that are positioned that way consume layout space on the page as if they were not moved away from their "natural" position. Thus, the page overflows when you add all those elements even though they're relocated such that they all fit.

By giving them "position: absolute", you take them out of the ordinary layout flow. Chrome doesn't agree about this, for reasons I don't understand; I think Firefox is actually doing the correct thing here. (edit — if you add a line to append one last <div> to "target", and make it just a plain-jane <div> with a little text in it but no positioning at all, then you'll see that it ends up way way down the page in Chrome, and you will get a scrollbar about the same size as Firefox gives you. Thus, it looks like Chrome doesn't "claim" the phantom space unless something actually comes after it.)

Here is a jsfiddle. The updated code (one extra line):

    $(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]);
        }
    });

回复收藏 0 原文

秋千易 2024-11-11 06:00:10

您可以将所有这些内容包含在 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'
     });
}

You can include all of that stuff in a css() function...

Demo: 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'
     });
}

回复收藏 0 原文

~没有更多了~