Javascript Dragscroll包含浮动div的div

我正在尝试拖动滚动包含浮动元素的div。你可以玩它

其目的是拖动灰色区域应拖动窗格。我将类似ExpandDiv的建议应用于浮动内容问题。这是我最大的努力-垂直溢出看起来不错，但水平滚动不好

在浮动元素的末尾添加了一个清除元素 添加溢出：隐藏；到浮动元素的父级 尝试浮动父div，但这似乎无法修复它 设置固定宽度可以工作，但内容是动态的

代码

参考资料

那么，你想要什么？ 水平滚动条不应出现在第二项中？ 因此，不要在第二个包装中指定宽度。您已指定宽度：220px；，在第二个包装中，但只有一个子项具有宽度：300px，即大于父项宽度，这就是水平滚动条出现的原因。 不要将宽度用于包装器2

---

我希望这能奏效。

不，滚动条是示例中有意使用的一部分。目标是通过单击并拖动灰色区域可以滚动div。通过设置项目2的固定宽度可以达到预期效果，例如，但我们不能这样做。

<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;
}

#wrapper2 {

    height: 200px;
    overflow: auto;
    border: 1px solid #ff0000;    
    background-color: lightgray;
    cursor: all-scroll;
}