Scrollable div without overflow:auto?

Question

In my app I have 2 divs, one with a long list of products that can be dragged into another div (shopping cart). The product div has the overflow but it breaks prototype draggable elements. The prototype hacks are very obtrusive and not compatible with all browsers.

So I am taking a different approach, is it possible to have a scrollable div without using CSS overflow:auto?

Answer 1

Theres a css property to control that.

<div style="width:100px;height:100px;overflow:scroll">
</div>

http://www.w3schools.com/Css/pr_pos_overflow.asp

Answer 2

You can use a frame with content larger than its window. Might make it hard to pass JS events though.

Answer 3

Here is what I wrote to have it running under IE 8.0.6 & Firefox 3.6.3:

Make draggable the elements (with border) in the "width:100px;scrollable:auto" container:

function makeDraggable(container,tag) {

    if(!container || !tag) { return false; }
    $(container).select(tag).each( function(o) {
      new Draggable(o,{
        starteffect: function(e){makeDragVisible(container,e);},
        endeffect: function(e){e.setStyle({'position':'','width':'','cursor':''});},
        zindex: 1000
        // , revert: ... // the other options
      });
    });

}

function makeDragVisible(container,element) {

    if(!container || !element) { return false; }
    var i=$(container).getStyle('width');
    i=i.replace('px','');
    i=Math.round(i-20)+'px';
    element.setStyle({'width':i,'z-index':1000,'position':'absolute','cursor':'move'});
    // 
    $(container).setStyle({});

}

Important notes:

1. the z-index is repeated
2. notice the container loss of style at the end of 'starteffect'. Cursor and width are simply there to keep the drag user friendly.

I hope it helps.