Question

我有一个拖动栏，允许我调整div的大小。问题是div中的内容在x方向溢出div，当我滚动时，拖动条消失，因为它的宽度是div的100％并且不会溢出。如何让它与其余内容一起溢出，所以即使我滚动，拖动条仍然可见？

我正在谈论的图片。橙色条是拖动条，当我沿x方向滚动查看内容时，它会在某个点消失。

HTML：

<div id="attribute-table">
    <button id="selectPatches">Select Patches</button>
    <button id="clearSelection">Clear Selection</button>
    <span id="featureCount">No features selected</span>
    <table>
        <thead>
            <tr>
                <th>State</th>
                <th>Point</th>
                <th>Patch Number</th>
                <th>Is Developed?</th>
                <th>Crop Type</th>
                <th>Crop Residue (%)</th>
                <th>Canopy Over 12' (%)</th>
                <th>Deciduous Canopy (%)</th>
                <th>Coniferous Canopy (%)</th>
                <th>Shrub Cover (%)</th>
                <th>Shrub Stem Density (%)</th>
                <th>Grass Cover (%)</th>
                <th>Forb Cover (%)</th>
                <th>Forb Protective Cover (%)</th>
                <th># of Forb Species</th>
                <th>Bare Ground (%)</th>
                <th>Herbaceous Height > 8"</th>
                <th>Coarse Habitat Type</th>
                <th>Fine Habitat Type</th>
                <th>Quail Habitat</th>
                <th>Observation Date</th>
                <th>Observation Type</th>
            </tr>
        </thead>
        <tbody id="table-data">
        </tbody>
    </table>
    <div id="attrTable-handle" class="ui-resizable-handle ui-resizable-n"></div>
</div>

CSS：

#attribute-table {
    display: none;
    position: absolute;
    height: 250px;
    bottom: 0 !important;
    top: auto !important;
    padding-top: 7px;
    background-color: white;
    z-index: 31;
    overflow: auto;
}
#attrTable-handle {
    height: 5px;
    background-color: orange;
    top: 0;
    width: 100%;
}

JS：

//Allow attribute table to be resized
$("#attribute-table").resizable({
    handles: {
        'n': '#attrTable-handle'
    }
});

Answer 1

因为用户可以通过折叠另一个div来更改此div的宽度，所以我必须动态设置拖动条的宽度。我通过找到div的scrollWidth然后使用css（）方法将拖动条宽度设置为它来完成此操作。

//Set the width of the drag-bar based on the content width
var width = $("#attribute-table")[0].scrollWidth;
$("#attrTable-handle").css("width", width);

需要拖杆溢出并适合div的全宽？

1 个答案: