面板固定内容滚动

Question

我正在尝试用 jQuery 和 ajax 做动态面板。

我的想法是，当我选择一个复选框时，执行我的 ajax 并返回带有此复选框的 category_id 的所有项目。我的所有过程都很好，但我的问题是我希望我的面板标题固定在我的模式中，并满足滚动-y 但我不能这样做。

这是我的代码：

// SET CATEGORY PRODUCT
$(".div-bag").append(`
                    <div class="container-offer-c" style="overflow-y: scroll; overflow-x: hidden; height: 150px; margin-bottom: 20px;">
                        <div class="panel-heading-offer bg-secondary"><span class="ml-3"> ARTICULOS C </span></div>
                    </div>
                `);

// LOOP TO GET ITEMS C
$.each(response[0], function(index, value) {
    $(".container-offer-c").append(`
                        <div class="container-offer-items" >
                            <div class="panel-heading-offer-items row align-items-center mt-2">
                                <div class="col-md-1 ml-2">
                                    <input type="checkbox" class="${ value.id } selectItem" value="${ value.id }">
                                </div>
                                <div class="col-md-2 ml-2">
                                    <span>${ value.codigo }</span>
                                </div>
                                <div class="col-md-4">
                                    <span class="size-font">${ value.nombre }</span>
                                </div>
                                <div class="col-md-2">
                                    
                                </div>
                                <div class="col-md-2">
                                    <input type="number" class="form-control" value="1" style="width: 100%; text-align:center">
                                </div>
                            </div>
                        </div>
                    `)

此代码导致：

但我需要修复我的面板，修复“ARTICULOS C”并使用滚动-y 修复他的内容

感谢您阅读我的内容，并对我的英语不好表示歉意

Answer 1

我解决了添加新 div 的问题：

// SET CATEGORY PRODUCT
                        $(".div-bag").append(`
                                <div class="container-offer-1" style="overflow-y: scroll; overflow-x: hidden; height: 150px; margin-bottom: 20px;">
                                    <div class="panel-heading-offer bg-secondary"><span class="ml-3"> MANTENIMIENTO </span></div>
                                </div>
                                <div class="container-offer-items-secondary-maintenance" style="overflow-y: scroll; overflow-x: hidden;">
                                </div>
                        `);