需要拖拽条溢出和适应全宽度的div？
需要拖拽条溢出和适应全宽度的div？
提问于 2018-05-08 21:02:51
我有一个拖拽条可以让我调整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'
}
});回答 1
Stack Overflow用户
发布于 2018-05-08 21:57:23
因为这个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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50234311
复制相关文章
相似问题
腾讯云开发者
