Clever Geek Handbook

Scrollable div without overflow: auto?

In my application, I have 2 divs, one with a long list of products that can be dragged and dropped into another div (shopping cart). The div product has an overflow, but it breaks the prototypes of the dragged elements. The hack prototypes are very intrusive and incompatible with all browsers.

So I'm using a different approach, is it possible to have a scrollable div without using CSS overflow:auto

?

+1


source to share


3 answers


This is the css property to control this.

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


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

+2


source


You can use a frame with content that is larger than its window. It might make it difficult to pass JS events.



+1


source


Here's what I wrote to make it work under IE 8.0.6 and Firefox 3.6.3:

Drag and drop items (with a border) in the container "width:100px;scrollable:auto"

:

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:

  • repeating z-index
  • notice the loss of the style container at the end 'starteffect'

    . The cursor and width are just there to maintain usability.

Hope this helps.

0


source






More articles:


All Articles