Dragscroll包含浮动div的div

时间:2015-09-20 11:27:01

标签: javascript html css scroll css-float

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

目的是拖动灰色区域应该拖动窗格。我已经应用了类似的建议来扩展div到浮动的内容"的问题。这是我的最大努力 - 垂直溢出看起来不错但水平滚动不好。

  1. 在浮动元素的末尾添加了一个清晰的元素
  2. 添加"溢出:隐藏;"到浮动元素的父级
  3. 尝试浮动父div,但这似乎没有解决它
  4. 设置固定宽度有效但内容是动态的。

    代码

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

    参考

    1. Horizontal scroll in a parent div containing floated child divs

    2. Floating elements within a div, floats outside of div. Why?

1 个答案:

答案 0 :(得分:-1)

那么,你想要什么? 水平滚动条不应出现在您的第二个项目中? 为此,请不要在第二个包装器中指定宽度。您已在第二个包装器中指定 width:220px; ,但只有一个子容器具有 width:300px ,即大于父宽度,这就是水平滚动条即将到来的原因。 不要使用 wrapper2 ....的宽度。

#wrapper2 {

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

我希望这有效。