Dragscroll a div containing floated divs

Question

I am trying to drag-scroll a div containing floated elements. You can play with it here

The intent is that dragging the grey area should drag the pane. I have applied suggestions from similar "expand div to floated content" questions. This is my best effort - vertical overflow looks good but horizontal scroll does not.

added a clear element to the end of the floated elements
added "overflow: hidden;" to parent of floated elements
tried floating the parent div but this didn't seem to fix it

Setting a fixed width works but the content is dynamic.

Code

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

References

score -1 · Answer 1 · answered Sep 20 '15 at 12:03

-1

So, What do you want? Horizontal scroll bar should not appear in your second item? For that don't assign width in the second wrapper.You have assigned width:220px;, in the second wrapper but only one child has width:300px ,i.e greater than parent width that's why the horizontal scroll bar is coming. Don't use width for wrapper2....

#wrapper2 {

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

I hope this works.

answered Sep 20 '15 at 12:03

Sajib Ghosh

410
1
6
17

Nope, the scrollbars are an intentional part of the example. The goal is that the div can be scrolled by click dragging on the grey area. The desired effect can be achieved by setting a fixed width on items2 e.g. http://jsfiddle.net/QhWbm/101/ but we can't do this. – daw Sep 20 '15 at 13:50

Dragscroll a div containing floated divs

1 Answers1