我正在尝试拖动包含浮动元素的div。你可以玩它here
目的是拖动灰色区域应该拖动窗格。我已经应用了类似的建议来扩展div到浮动的内容"的问题。这是我的最大努力 - 垂直溢出看起来不错但水平滚动不好。
设置固定宽度有效但内容是动态的。
代码
<div class="title">Tall elements - ok</div>
<div id="wrapper">
<div id="scroller">
<div id="items">
<div class="item-tall">hi</div>
<div class="item-tall">ho</div>
<div class="item-tall">off</div>
<div class="item-tall">...</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="title">Wide elements - not ok</div>
<div id="wrapper2">
<div id="scroller2">
<div id="items2">
<div class="item-wide">hi</div>
<div class="item-wide">ho</div>
<div class="item-wide">off</div>
<div class="item-wide">...</div>
<div class="clear"></div>
</div>
</div>
</div>
$('#wrapper, #scroller').dragscrollable({
dragSelector: '#items',
acceptPropagatedEvent: false
});
$('#wrapper2, #scroller2').dragscrollable({
dragSelector: '#items2',
acceptPropagatedEvent: false
});
#wrapper {
width: 220px;
height: 200px;
overflow: auto;
border: 1px solid #ff0000;
background-color: lightgray;
cursor: all-scroll;
}
#scroller {
height: 100%;
}
#wrapper2 {
width: 220px;
height: 200px;
overflow: auto;
border: 1px solid #ff0000;
background-color: lightgray;
cursor: all-scroll;
}
#scroller2 {
height: 100%;
}
#items {
overflow: hidden;
}
#items2 {
height: 100%;
/* width: 500px; this will fix it */
overflow: hidden;
}
.item-tall {
width: 30px;
height: 500px;
float: left;
background-color: white;
cursor: default;
}
.item-wide {
height: 30px;
min-width: 1000px;
float: left;
background-color: white;
cursor: default;
}
.clear {
clear: both;
}
.title {
padding: 20px;
}
参考
答案 0 :(得分:-1)
那么,你想要什么? 水平滚动条不应出现在您的第二个项目中? 为此,请不要在第二个包装器中指定宽度。您已在第二个包装器中指定 width:220px; ,但只有一个子容器具有 width:300px ,即大于父宽度,这就是水平滚动条即将到来的原因。 不要使用 wrapper2 ....的宽度。
#wrapper2 {
height: 200px;
overflow: auto;
border: 1px solid #ff0000;
background-color: lightgray;
cursor: all-scroll;
}
我希望这有效。