jQuery .append () в Firefox: появляется вертикальная полоса прокрутки? - PullRequest
Новая
       14

jQuery .append () в Firefox: появляется вертикальная полоса прокрутки?

2 голосов
/ 29 апреля 2011

Я хочу динамически добавить несколько DIV к целевому DIV на моей странице с помощью .append (), затем установить их высоту и положение, чтобы они все были видны на странице без прокрутки.

Все это идет хорошо, но в Firefox (3.6.16 в Ubuntu) появляется вертикальная полоса прокрутки, как если бы высота каждого нового DIV добавлялась к общей высоте содержимого страницы - даже если каждый новый DIV вверх в верхней части экрана, а его высота не близко к длине экрана. Ubuntu Chrome ведет себя хорошо. Когда я спрашиваю у jQuery высоту целевого DIV после добавления новых 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>

Ответы [ 2 ]

1 голос
/ 29 апреля 2011

Если вы добавите <div> элементы "position: absolute", то вы не получите полос прокрутки.

Утилита jQuery UI ".position ()" выдаст затронутые элементы (добавленные вами).<div> элементы) "position: относительный", если они не установлены с помощью "position".Элементы, расположенные таким образом, занимают место на странице, как если бы они были , а не удалены от своего "естественного" положения.Таким образом, страница переполняется, когда вы добавляете все эти элементы, даже если они перемещены так, что они все подходят.

Предоставляя им «position: absolute», вы выводите их из обычного потока макета.Chrome не согласен с этим по причинам, которые я не понимаю;Я думаю, что Firefox на самом деле делает все правильно.( edit - если вы добавите строку, добавляющую одну последнюю <div> к «target», и сделаете ее просто «jane <div>» с небольшим текстом в ней, но без позиционирования вообще, тогдавы увидите, что в 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]);
        }
    });
0 голосов
/ 29 апреля 2011

Вы можете включить все эти вещи в функцию 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'
     });
}
...