个人中心
gpt4 book ai didi

Firefox 中的 jQuery .append() : vertical scrollbar appears?

转载 作者：行者123 更新时间：2023-12-01 05:06:06 26 4
gpt4 key购买 nike

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

所有这些都很顺利，但是在 Firefox(Ubuntu 上为 3.6.16)中，会出现一个垂直滚动条，就好像每个新 DIV 的高度都被添加到页面内容的总高度中一样 - 尽管每个新 DIV 都是靠近屏幕顶部，其高度远不及屏幕长度。 Ubuntu Chrome 表现良好。当我在 append 新 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>

最佳答案

如果您添加了 <div>元素“position:absolute”，那么你将不会得到滚动条。

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

通过给它们“position:absolute”，您可以将它们从普通的布局流程中取出。 Chrome 不同意这一点，原因我不明白；我认为 Firefox 实际上在这里做的是正确的事情。 (编辑 - 如果您添加一行将最后一个 <div> append 到“目标”，并使其只是一个简单的 <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]);
        }
    });

关于Firefox 中的 jQuery .append() : vertical scrollbar appears?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5832043/

26 4 0
文章推荐： jQuery - 从 HTML 元素中检索值并返回它们的总和
文章推荐： jQuery - "preloading"(setinterval)的效果？
文章推荐： jQuery 使用 "data"属性更改 div 中的文本
文章推荐： jquery - MouseOver 删除类 MouseOut 恢复类
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com